This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

What is?

Web Components are a different set of technologies that allow you to create reusable custom elements whose functionality is encapsulated outside of your code and use them in your Web applications.

The Three Musketeers (Main component)

  • Custom Elements: A set of JavaScript apis that allow you to define Custom elements and their behavior, and then use them as needed in your user interface.
  • Shadow DOM: A set of JavaScript apis for attaching a wrapped “Shadow” DOM tree to an element (rendered separately from the main document DOM) and controlling its associated functionality. This way, you can keep the functionality of elements private so that they can be scripted and styled without fear of running afoul of the rest of the document.
  • HTML Templates:  [<template>] and [<slot>The] element lets you write tag templates that are not displayed on rendered pages. They can then be reused many times as a basis for custom element structures.

How to use

  1. Create a class or function to specify the functionality of a Web component, using ECMAScript 2015 class syntax (Portal es6.ruanyifeng.com/#docs/class) if you use classes.
  2. Use [CustomElementRegistry.define()The] method registers your new custom element and passes it the name of the element to be defined, the class that specifies the element’s functionality, and optionally the element it inherits from.
  3. Use [Element.attachShadow()The] method appends a shadow DOM to the custom element. Use the usual DOM methods to add child elements, event listeners, and so on to the shadow DOM, such as tags like video.
  4. Use [<template>] and [<slot>] defines an HTML template. Clone the template again using normal DOM methods and attach it to your Shadow DOM.
  5. Use custom elements wherever you like on the page, just as you would use regular HTML elements.

The life cycle

  • connectedCallback: called when the custom element is first connected to the document DOM.
  • disconnectedCallback: called when a custom element is disconnected from the document DOM.
  • adoptedCallback: called when a custom element is moved to a new document.
  • attributeChangedCallback: called when an attribute of a custom element is added, removed, or changed.

The code shown

index.html

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <my-dropdown label="nihao" name="zhao"></my-dropdown>
    <script src=".. /js/webComponents.js"></script>

</body>
</html>
Copy the code

webcomponents.js

const template = document.createElement('template');
template.innerHTML = `  
      
 
       Label 
       
        Content
        
       
 
        
     
       
     
      
     `    ;

class Dropdown extends HTMLElement {
    constructor() {
        super(a);this._sR = this.attachShadow({ mode: 'open' }); // If mode is false, the element cannot be fetched
        this._sR.appendChild(template.content.cloneNode(true));
        this.$label = this._sR.querySelector('.label');
        this.$button = this._sR.querySelector('my-button');
    }
    static get observedAttributes() {
        return ['label'.'option'.'options'];
    }
    attributeChangedCallback(name, oldVal, newVal) {
        this[name] = newVal
        this.render();
    }
    render() {
        this.$label.innerHTML = this.label;   
        this.$button.setAttribute('label'.'Select Option'); }}window.customElements.define('my-dropdown', Dropdown);
Copy the code

    rendering

    The END:

    [Web Components API] Compared to third-party frameworks, native Components are straightforward and intuitive, don’t load any external modules, have less code, and don’t require a bunch of engineering tools. It’s still evolving, but it’s already available in production environments. Componentization, reuse, this is almost all developers aspire to. The Web Components API was proposed for this purpose. You can use custom elements to create encapsulation functionality that 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 idea is very similar to the mainstream front-end framework, do not know who borrowed from who, but the progress of technology is to learn from each other!