Web Components: Difference between revisions

Content deleted Content added

Inline

Revision as of 00:55, 20 August 2016

Web Components are a set of features currently^[1] being added by the W3C to the HTML and DOM specifications that allow for the creation of reusable widgets or components in web documents and web applications. The intention behind them is to bring component-based software engineering to the World Wide Web. The components model allows for encapsulation and interoperability of individual HTML elements.

Web Components consist of 4 main features which can be used separately or all together:

Custom Elements - APIs to define new HTML elements
Shadow DOM - Encapsulated DOM and styling, with composition
HTML Imports - Declarative methods of importing HTML documents into other documents
HTML Templates - The <template> tag, which allows documents to contain inert chunks of DOM

Browser Support

HTML Templates are supported in Google Chrome, Mozilla Firefox, Microsoft Edge, Safari and Opera.^[2]

Support for an early version of Custom Elements and Shadow DOM, known as "v0", is present in some Blink-based browsers like Google Chrome and Opera and is in Mozilla Firefox (requires a manual configuration change). The newer Custom Elements and Shadow DOM "v1" APIs are being implemented in Safari 10,^[3] Google Chrome (53.0.2785), and under development in Mozilla Firefox. Microsoft Edge has not started implementing Custom Elements or Shadow DOM yet.^[4]

Backwards compatibility with older browsers is implemented using JavaScript-based polyfills.

References

^ "Web Components Current Status - W3C".
^ "Can I use... Support tables for HTML5, CSS3, etc".
^ "What's New in Safari". Apple Inc. Retrieved 21 June 2016.
^ "Are We Componentized Yet?".

External links

This World Wide Web–related article is a stub. You can help Wikipedia by expanding it.

[1] "Web Components Current Status - W3C".

[2] "Can I use... Support tables for HTML5, CSS3, etc".

[3] "What's New in Safari". Apple Inc. Retrieved 21 June 2016.

[4] "Are We Componentized Yet?".

[1]

[2]

[3]

[4]

@@ Line 11: / Line 11: @@
 HTML Templates are supported in [[Google Chrome]], [[Mozilla Firefox]], [[Microsoft Edge]], [[Safari (web browser)|Safari]] and [[Opera (web browser)|Opera]].<ref>{{ Cite web|url=http://caniuse.com/template|title=Can I use... Support tables for HTML5, CSS3, etc}}</ref>
-Support for an early versions of Custom Elements and Shadow DOM, known as "v0", is present in some [[Blink (web engine)|Blink]]-based browsers like [[Google Chrome]] and [[Opera (web browser)|Opera]] and is in [[Mozilla Firefox]] (requires a manual configuration change). The newer Custom Elements and ShadowDOM "v1" APIs are being implemented in [[Safari (web browser)|Safari]] 10,<ref>{{cite web|title=What's New in Safari|url=https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html|publisher=[[Apple Inc.]]|accessdate=21 June 2016}}</ref> [[Google Chrome]], and under development in [[Mozilla Firefox]]. [[Microsoft Edge]] has not started implementing Custom Elements and Shadow DOM yet.<ref>{{Cite web|url=http://jonrimmer.github.io/are-we-componentized-yet/|title=Are We Componentized Yet?}}</ref>
+Support for an early version of Custom Elements and Shadow DOM, known as "v0", is present in some [[Blink (web engine)|Blink]]-based browsers like [[Google Chrome]] and [[Opera (web browser)|Opera]] and is in [[Mozilla Firefox]] (requires a manual configuration change). The newer Custom Elements and Shadow DOM "v1" APIs are being implemented in [[Safari (web browser)|Safari]] 10,<ref>{{cite web|title=What's New in Safari|url=https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html|publisher=[[Apple Inc.]]|accessdate=21 June 2016}}</ref> [[Google Chrome release history|Google Chrome (53.0.2785)]], and under development in [[Mozilla Firefox]]. [[Microsoft Edge]] has not started implementing Custom Elements or Shadow DOM yet.<ref>{{Cite web|url=http://jonrimmer.github.io/are-we-componentized-yet/|title=Are We Componentized Yet?}}</ref>
 Backwards compatibility with older browsers is implemented using [[JavaScript]]-based [[polyfill]]s.