This is the 10th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Introduction to the

Google, with its mastery of Chrome, has been pushing the browser’s native component, the Web Components API. Compared to third-party frameworks, native components are simple, straightforward, intuitive, do not need to load any external modules, and the amount of code is small. Currently, it is still evolving, but is ready for use in production environments.

Componentization, reuse, this is what almost all developers pursue. This is where the Web Components API comes in. Custom elements that can be used to create encapsulated functionality can be reused anywhere you like without worrying about code conflicts. The Web Components API allows us to create reusable custom elements and use them directly in our Web applications.

This concept is very similar to Vue and React, focusing on components. So the Web Components API may be the future of the front end!

The main technical

  • **Custom Elements: ** a set of JavaScript apis that allow you to define Custom Elements and their behavior, which can then be used as needed in your user interface.
  • Shadow DOM: A set of JavaScript apis for attaching an encapsulated “Shadow” DOM tree to an element (rendered separately from the main document DOM) and controlling its associated functionality. In this way, you can keep the functions of elements private so that they can be scripted and styled without fear of conflict with other parts of the document.
  • HTML Templates: the

Life cycle callback function

  • ConnectedCallback: Called when the Custom Element is first inserted into the document DOM.
  • DisconnectedCallback: Called when a Custom Element is removed from the document DOM.
  • AdoptedCallback: Called when a Custom Element is moved to a new document.
  • AttributeChangedCallback: when a custom element increase, delete and modify their own property, is invoked.

Related to the interface

  1. CustomElementRegistry
  2. HTMLSlotElement
  3. HTMLTemplateElement
  4. ShadowRoot
  5. DocumentOrShadowRoot
  6. Slotable

Relevant properties

  1. Element.shadowRoot
  2. Element.slot
  3. Event.composed
  4. Event.composedPath
  5. Node.isConnected
  6. Window.customElements

Relevant methods

  1. Document.createElement()
  2. Element.attachShadow()
  3. Node.getRootNode()

If the article can help you, I feel very honored. If the article can be you like, that is a great honor.

Personal wechat: IOTzzh Public account: Front-end Wechat personal website: www.iotzzh.com