Web components简述

·  阅读 93
Web components简述

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

是什么?

Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。

三剑客(主要组成部分)

  • Custom elements(自定义元素): 一组JavaScript API,允许您定义custom elements及其行为,然后可以在您的用户界面中按照需要使用它们。
  • Shadow DOM(影子DOM) :一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。
  • HTML templates(HTML模板):  [<template>] 和 [<slot>]元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

如何使用

  1. 创建一个类或函数来指定web组件的功能,如果使用类,请使用 ECMAScript 2015 的类语法(传送门es6.ruanyifeng.com/#docs/class )。
  2. 使用 [CustomElementRegistry.define()]方法注册您的新自定义元素 ,并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。
  3. 使用[Element.attachShadow()]方法将一个shadow DOM附加到自定义元素上。使用通常的DOM方法向shadow DOM中添加子元素、事件监听器等等,如video等标签。
  4. 使用 [<template>]和[<slot>]定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到您的shadow DOM中。
  5. 在页面任何您喜欢的位置使用自定义元素,就像使用常规HTML元素那样。

生命周期

  • connectedCallback: 当自定义元素第一次被连接到文档DOM时被调用。
  • disconnectedCallback: 当自定义元素与文档DOM断开连接时被调用。
  • adoptedCallback: 当自定义元素被移动到新文档时被调用。
  • attributeChangedCallback: 当自定义元素的一个属性被增加、移除或更改时被调用。

代码展示

index.html

<!DOCTYPE html>
<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>
复制代码

webcomponents.js

const template = document.createElement('template');
template.innerHTML = `
    <style>
        :host {
            font-family: sans-serif;
        }
        .dropdown {
            padding: 3px 8px 8px;
        }
         .label {
            display: block;
            margin-bottom: 5px;
            color: #000000;
            font-size: 16px;
            font-weight: normal;
            line-height: 16px;
        }   
        .dropdown-list-container {
            position: relative;
        }
        .dropdown-list {
            position: absolute;
            width: 100%;
            display: none;
            max-height: 192px;
            overflow-y: auto;
            margin: 4px 0 0;
            padding: 0;
            background-color: #ffffff;
            border: 1px solid #a1a1a1;
            box-shadow: 0 2px 4px 0 rgba(0,0,0, 0.05), 0 2px 8px 0 rgba(161,161,161, 0.4);
            list-style: none;
        }
        .dropdown-list li {
            display: flex;
            align-items: center;
            margin: 4px 0;
            padding: 0 7px;
            font-size: 16px;
            height: 40px;
            cursor: pointer;
        }

    </style>
    <div class="dropdown">
        <span class="label">Label</span>
        <my-button as-atom>Content</my-button>
        <div class="dropdown-list-container">
            <ul class="dropdown-list"></ul>
        </div>
    </div>
`;

class Dropdown extends HTMLElement {
    constructor() {
        super();
        this._sR = this.attachShadow({ mode'open' }); // mode为false,元素不能被获取
        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);
复制代码

效果图

image.png

END:

[Web Components API]相比第三方框架,原生组件简单直接,符合直觉,不用加载任何外部模块,代码量小,更不需要一堆工程化工具。目前,它还在不断发展,但已经可用于生产环境。 组件化、复用,这几乎是所有开发者追求的东西。[Web Components API]就是为此而提出。可以使用来创建封装功能的定制元素,可以在你喜欢的任何地方重用,不必担心代码冲突。[Web Components API]允许我们创建可重用的定制元素,并且在我们的web应用中直接使用它们。这种思想跟现在的主流前端框架很像,不知道谁借鉴的谁,不过技术的进步就是取长补短!

分类:
前端
标签: