- HTML Templates — Reusable templates/html fragments. Read more.
- Shadow DOM — This is what enables encapsulation for a section of an html page/widget by introducing a new element (known as 'shadow root') in the DOM tree. Read more.
- Custom Elements — Custom elements are probably the best new thing available out of the box for web developers as they allow us to define new HTML elements without the need for an external library (if you've used angularjs, think custom directives). With custom elements you can have something like below in your html
Assuming contoso is the namespace under with your timeline control goes. That one line encapsulates the complete functionality of the timeline control. Neat! Read about custom elements in more detail.
Google has released an amazing library called Polymer that is worth a look. It's essentially a polyfill for web components.
Not all browsers support Web Components today. The latest builds of Chrome & Opera do have the support for web components. What features are supported by which browsers can be checked at caniuse.com.
To get a sense of what is coming in the future releases of each browser, you can check the respective bleeding edge versions — Chrome Canary, Firefox Nightly, Opera Next and IE.
Web development, HTML 5, web standards