Componentization is a common software development practice. A large project can be divided into small components. The development team can work on different components in parallel. Components can be easily reused across different projects. Components contributed by the open source community can also be used in product development to reduce the efforts. Other popular programming platforms, like Java, Ruby, and Python all have their own component ecosystems. For the web platform, the standardization process of component modeling is still very slow.
Web Components is a set of platform APIs for creating reusable components for web pages and web apps. Specifications related to Web Components have changed several times. There are four major concepts related to Web Components, including custom elements, shadow DOM, HTML imports, and HTML template. Each of these concepts used to have its own W3C specification. Now they are being merged to DOM and HTML standards.
Custom Elements – Custom Elements enables the creation of custom HTML elements. These custom HTML elements are the embodiment of components for the web platform. Custom elements can be used in HTML pages like standard built-in elements.
Shadow DOM – A proper implementation of componentization cannot live without encapsulation. Encapsulation protects components from unexpected conflicts with other components that run on the same platform. Shadow DOM makes it possible to encapsulate HTML markups and styles in web components.
HTML Imports – Custom elements need to be imported into the current HTML page first before they can be used.
HTML Template – Dynamically importing HTML documents may have a runtime performance penalty. HTML templates are fragments of markup that are included in the page, but they are not used at page load time. Templates can be instantiated at runtime when necessary. The HTML template is merged into the HTML standard
