Fun With Web Components 1
Web Components is an exciting new feature that enables developers to consume and author reusable elements. Imagine hiding away all the <div> wrappers, styles and javascript we write to create custom widgets, such as suggest boxes and accordions, into separate and encapsulated components using native browser capabilities.
A great video on Web Components is here.
Ingredients
- Git client: (I like the one from Github) http://eclipse.github.com/
- Chrome latest: http://www.google.com/chrome/
- A web server (Always good to have and a nice way to get around Chrome’s default security settings preventing cross origin requests on your local file system)
- Dimitri Glazkov’s Web Components Polyfill: https://github.com/dglazkov/Web-Components-Polyfill
Setting up is a piece of cake
- Enable Shadow DOM and <style scoped="scoped">
- Go to chrome://flags/
- Enable Shadow DOM and <style scoped>
- Copy the project to your web server and load up one of the example pages in Web-Components-Polyfill/samples
Now to experiment...
