Use polymer JS

Web Components

Web components are a group of web technologies that make it possible to create user-defined, reusable HTML elements whose functionality is encapsulated and therefore completely separate from other code.

It is generally accepted among software developers to reuse code as much as possible. For custom markup structures, it is known that this was not that easy. Just think of the complex HTML (as well as CSS and scripting) conglomerate that was partly necessary to create custom UI controls; and how the repeated use of such user-defined elements on a page can lead to a completely opaque mess if one is not proceeded with extreme care.

Web components aim to solve these problems. Consisting of three main technologies that can be used together to create diverse and versatile custom elements with encapsulated functionality that can be reused as often as you like without fear of different code affecting or interfering with each other:

  • Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used anywhere in your user interface.
  • Shadow DOM: A set of JavaScript APIs to attach a tree of encapsulated "shadow" DOM ​​elements to an element that is rendered independently of the DOM of the main document and to control the associated functionality. With the help of this technology, the characteristics of such elements remain private so that scripts and styles can be applied to them without them colliding with other parts of the document.
  • HTML templates: The - and (en-US) elements allow you to write markup templates that are not shown on the displayed page. These can then be reused multiple times as the basis for custom elements.

The basic approach for implementing a web component is generally like this:

  1. Create a class or function that defines the functionality of the web component. If you use a class for this, then use the ECMAScript 2015 syntax (see also Classes).
  2. Register the new custom item using the method. The element name to be defined, the class or function in which the functionality is defined and optionally the element from which the new user-defined element inherits are passed to this method.
  3. If necessary, attach a shadow DOM to the custom element using the (en-US) method. Children, event handlers, and so on, are added to the shadow DOM using standard DOM methods.
  4. If necessary: ​​Define an HTML template using and (en-US). Again, the usual DOM methods are used to then copy the HTML template and add it to the shadow DOM.
  5. The custom element created in this way can be inserted anywhere on the page - just like a normal HTML element.

Exercises

Custom elements
Shows how custom elements can be used to create simple web components, the callback functions within the lifecycle of a web component, as well as some other, more advanced parts of custom elements.
Shadow DOM
Take a look at the basics of the shadow DOM: how to attach a shadow DOM to an element, how to add elements to the shadow DOM tree, how to apply styles to them, and more.
Templates and inserts
Shows how a reusable HTML structure is defined using the and (en-US) elements and how this structure is then used within web components.

reference

Custom elements

Includes methods related to custom elements, specifically the method used to register new custom elements so that they can be used in a document.
(en-US)
Returns a reference to an object.
Callback functions within the life cycle
Special callback functions that are defined within the class of the user-defined control element and control its behavior:
  • : Called when the custom element is connected to the document's DOM.
  • : Called when the custom element is detached from the document's DOM.
  • : Called when the custom element is moved to a new document.
  • : Called when one of the attributes of the custom element is added, deleted or changed.
Extensions to create custom built-in elements
  • The global attribute is used to specify a standard HTML element that should behave like a user-defined element.
  • The "is" option of the method is used to create an instance of a previously registered custom standard HTML element.
CSS pseudo-classes
Pseudo-classes specifically related to user-defined elements:
  • (en-US): Applies to any defined element, including built-in and custom elements defined using.
  • (en-US): Selects the respective container element of the shadow DOM to which the respective CSS rule is applied.
  • (en-US): Selects the container element of the shadow DOM to which the respective CSS rule is applied - but only if the selector, which is passed as a function argument, matches the respective container element.
  • (en-US): Selects the container element of the shadow DOM to which the respective CSS rule is applied - but only if the selector, which is passed as a function argument, refers to the hierarchy above the respective container element within of the DOM fits.

Shadow DOM

HTML templates

Contains an HTML fragment that is not displayed when the containing document is loaded. However, it can be displayed at runtime using JavaScript. It is mainly used as the basic structure for custom elements. The associated DOM interface is: (en-US).
(en-US)
A placeholder within a web component that can be filled with custom markup. In this way, different DOM fragments can be created with the same HTML template, which can all be displayed together. The associated DOM interface is:.
The global HTML attribute
Assigns a slot within a shadow DOM tree to an element.
(en-US)
A mixin that is implemented by both - and (en-US) nodes. It defines methods that allow the respective nodes to become the content of a (en-US) element. The mixin defines an attribute: (en-US), which provides a reference to the slot into which the node was inserted.
Extensions
Extensions of the interface that relate to withdrawable units:
CSS pseudo-elements
Pseudo-elements specifically related to inserts:
The event
Is triggered on an instance ( (en-US) element) when the node (s) in the slot change.

Examples

You can find a number of examples in our web-components-examples GitHub repository. More examples will be added to this repository over time.

Specifications

Browser compatibility

Basically:

  • By default, web components are supported by Firefox (from version 63), Chrome, and Opera.
  • Safari supports a number of web component features, but less so than the browsers mentioned above.
  • Edge is working on an implementation.

For detailed information on the support of specific features of individual browsers, please refer to the reference documents mentioned above.

See also

  • webcomponents.org - Website that offers examples, exercises and further information on web components.
  • Hybrids - Open source web component library that prefers simple objects and pure functions to and this syntax. The library offers a simple, functional API for creating user-defined elements.
  • Polymer - Google's web components framework - a collection of polyfills, extensions and examples. This framework is currently the easiest way to use web components across browsers.
  • Snuggsi.es - Easy access to web components in ~ 1kB, including polyfill - All you need is a browser and a basic understanding of HTML, CSS and JavaScript classes to get started.
  • Slim.js - Open Source Web Components Library - a high-performance library to create components quickly and easily. Expandable with plug-ins and cross-framework compatible.
  • Smart.js - web component library with a simple API to create custom elements across browsers.