In today’s popular front-end componentized development, a variety of frameworks bewildering, the same company, different teams, may be using different frameworks. In terms of unified vision, interaction and function, different frameworks may need to be developed with different frameworks. However, when functions and interaction change, all frameworks need to be developed simultaneously. This is a cost of manpower and material resources, and maintenance is not very good, so is there a component that can be compatible with all frameworks, and easy to develop and maintain? Then Web Components may be the answer you need.

Web Components is a native-provided technology that allows the creation of reusable custom elements.

concept

Web Components is a native-provided technology for customizing UI controls. Web Components consists of four technologies.

  • Custom Elements
  • Shadow DOM
  • HTML Templates
  • HTML Imports (HTML Imports)
  1. Custom Elements A set of javascript apis that allow you to define Custom elements and their behavior.
customElements.define('jason-custom',
  class extends HTMLElement {
    constructor() {
      super()

      let jasonTestElem = document.createElement('div');
      jasonTestElem.textContent = this.getAttribute('text');

      let shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(jasonTestElem)
  }
})
Copy the code

Use the CustomElementRegistry object to generate Custom Elements, which allows you to register a CustomElement

CustomElements. Define () accepts three parameters:

  • DOMString Creates the name of the element (custom Element names must contain a dash);
  • Class objects depend on the behavior of classes;
  • An object containing the extends property, with the optional argument specifying from which built-in element the created element inherits.

There are two kinds of custom elment:

  • Autonomous Custom Elements is a stand-alone element that does not inherit any HTML elements and can be used directly in a page, for example<jason-elm></jason-elm>Or,document.createElement('jason-elm')
  • Customized built-in elements Inherit basic HTML elements. To create, you must inherit from a basic HTML element and use Customized elementsisProperty specifies the name. Such as<p is='jason-elm'></p>Or,document.createElement('p', { is: 'jason-elm'})

Example:

Autonomous custom elements

class JasonCustom extends HTMLElement {
    constructor() {
        super()
        
        let divElem = document.createElement('div')
        divElem.textContent = 'This is a test Autonomous custom element'
        
        let shadowRoot = this.attachShadow({mode: 'open'})
        shadowRoot.appendChild(divElem)
    }
}
customElements.define('jason-custom', JasonCustom)
Copy the code


Customized built-in elements

class JasonCustom extends HTMLUListElement {
    construtor() {
        super()
        //
    }
}

customElements.define('jason-custom', JasonCustom, { extends: 'ul' })
Copy the code

To use this custom element in a page use

    Custom component lifecycle callback functions

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

    An example of using the declaration cycle callback function can be seen online at life-cycle-callbacks

    Shadow DOM

    An important feature of Web Components is encapsulation, which hides HTML, CSS, and behavior and separates it from the rest of the code on the page so that different functions don’t get mixed up. The Shadow DOM allows you to add hidden individual elements to an element.

    The Shadow DOM allows you to add a hidden DOM to a regular DOM tree

    • Shadow host: A regular DOM node to which the Shadow DOM is added.
    • Shadow Tree: Shadow DOM Internal DOM tree.
    • Shadow boundary: The place where the Shadow DOM ends and where the regular DOM begins.
    • Shadow root: indicates the root node of Shadow tree.

    You can manipulate Shadow DOM elements just as you would basic DOM elements. You can also add

    usage

    You can add the Shoadow DOM to any Element using element.attachShadow (). AttachShadow accepts an object as an argument, which has a mode attribute and two optional values, open close.

    let shadowOpen = Elementp.attachShadow({'mode': open})
let shadowClose = Elementp.attachShadow({'mode': close})
Copy the code

    Open can get shandow DOM via javascript for example

    let shadowDom = Elementp.shadowRoot
Copy the code

    If shadowRoot is closed, the shadow Dom cannot be accessed externally. If shadowRoot is accessed, null will be returned

    For a more detailed article, see Open vs. Closed Shadow DOM.

    templates slot

    Yes, there is no wrong, now native provides template functionality!! This template is not rendered by the browser but can be called using javascript!

    The official example

    <template id="my-paragraph">
  <p>My paragraph</p>
</template>
Copy the code

    How do you use it when you use it

    let template = document.getElementById('my-paragraph');
let templateContent = template.content;
document.body.appendChild(templateContent);
Copy the code

    You can increase the flexibility of the template with slot, which is used to provide a placeholder

    Slot uses the name attribute as the ID. You can define arbitrary HTML snippets in tempalte as placeholders when template objects are used in HTML scripts. Such as:

    // tamplate
<p><slot name="my-text">My default text</slot></p> // when used <my-paragraph> <span slot="my-text">Let's have some different text!  s have some different text! </span></p>Copy the code

    Of course, the above code is agricultural era code, so we can use the efficiency of industry 2.0 to develop the framework of Web Components such as Google polymer, Ionic and stencil.

    Although the standard has been around for a long time, there haven’t been many developers involved. Probably because of the compatibility of this thing.

    Stay Hungry. Stay Foolish