Web Components: Difference between revisions

Revision as of 02:52, 28 September 2024

Latest revision as of 01:46, 12 August 2025

(5 intermediate revisions by 4 users not shown)

Line 53:

== Community ==

There are numerous community efforts for the Web Components ecosystem. [https://www.webcomponents.org/ WebComponents.org]<ref>{{Cite web|url=https://www.webcomponents.org/search|title=Search available Web Components}}</ref> provides an interface to search for any existing Web Components,. Custom Elements Everywhere<ref>{{Cite web|url=https://custom-elements-everywhere.com|title=Validate Front-end Frameworks with Web Components Standard}}</ref> validates whether popular front-end frameworks are compatible and ready to use Web Components standard, with a set of pending bugs and available workarounds. Moreover, Vaadin Tutorials<ref>{{Cite web|url=https://vaadin.com/learn/tutorials?query=web%20components|title=Web Components Tutorials}}</ref> has a dedicated section that shows how those workarounds are used efficiently with example demo apps and similarly related topics aka Infinite Craft.

== History ==

In 2011, Web Components were introduced for the first time by Alex Russell at Fronteers Conference.<ref>{{Cite web|url=https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell|title=Web Components and Model Driven Views by Alex Russell · Fronteers|website=fronteers.nl|access-date=2016-12-02|archive-date=2022-04-17|archive-url=https://web.archive.org/web/20220417101036/https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell|url-status=dead}}</ref>

In 2013, [[Polymer (library)|Polymer]], a library based on Web Components was released by Google.<ref name="hacks_2015-06"/> Polymer is [[Canonicalization|canonical implementation]] of [[Material Design]] for web application user interfaces.

Line 64:

In 2017, [[Ionic (mobile app framework)]] team built [[StencilJS]], a JavaScript compiler that generates Web Components.<ref>{{cite web|url=https://levelup.gitconnected.com/web-component-solutions-a-comparison-e2fa25c34730|title=Web Component Solutions: A Comparison}}</ref>

In 2018, [[Angular (web framework)|Angular]] 6 introduced Angular Elements that lets you package your Angular components as custom web elements, which are part of the web components set of web platform APIs.<ref>{{cite web|url=https://www.freecodecamp.org/news/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a/|title=How to create Angular 6 Custom Elements and Web Components}}</ref>

In 2018, [[Firefox]] 63 enabled Web Components support by default and updated the developer tools to support them.<ref>{{Cite web | url=https://blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/ |title = Developer Tools support for Web Components in Firefox 63}}</ref>

Line 82:

== External links ==

*{{official website}}

**{{GitHub|webcomponents}}

*[https://wicg.github.io/webcomponents/ Web Components Specifications] [[WICG]]

**{{GitHub|WICG/webcomponents}} [[WICG]] specifications

*[https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] at [[MDN Web Docs]]

*[https://caniuse.com/?search=components Browser Support for Custom Elements] at Can I Use?

*[https://custom-elements-everywhere.com/ Custom Elements Everywhere - Framework Support for Custom Elements]

*[https://open-wc.org/ Open Web Components]

*[https://nhswd.com/blog/web-components-101-what-are-web-components What are Web Components?]

*[https://www.npmjs.com/package/twobirds-core twoBirds]

{{W3C standards}}