web components怎么创建纯前端组件

Question

想在纯前端里面的HTML文件，创建可复用的组件。应该怎么创建呢？

Answer 1

web components创建组件的实践需要依赖三个技术：

• Custom elements（自定义元素）customElements.define('my-header', Xheader)
• Shadow DOM（影子DOM）attachShadow
• HTML templates（HTML模板）<template>和 <slot>

// HTML模板技术包含两个标签：<template>和 <slot>
// 当需要在页面上重复使用同一个 DOM结构时，可以用 template 标签来包裹它们，然后进行复用
// slot标签让模板更加灵活，编写模板中增加组件中的某些内容
const str =
    `
    <style>
        header {
            height: 50px;
            line-height: 50px;
            width: 100%;
            text-align: center;
            color: white;
            background-color: red;
        }
    </style>
    <header><slot name="my-title">头部</slot></header>
    `
class Xheader extends HTMLElement {
    constructor() {
        super();
        const template = document.createElement('template');
        template.innerHTML = str;
        const templateContent = template.content;
        // 创建一颗可见的DOM树，这棵树会附着到某个DOM元素上
        // 这棵树的根节点称之为shadow root，只有通过shadow root 才可以访问内部的shadow dom，并且外部的css样式也不会影响到shadow dom上
        // 相当于创建了一个独立的作用域
        this.attachShadow({
            mode: 'open'// 'open' 表示该shadow dom可以通过js 的函数进行访问
        }).appendChild(
            templateContent.cloneNode(true)// 操作shadow dom
        );
    }
}
// 允许自定义标签，然后可以在你的页面中用<my-header></my-header>使用该组件
customElements.define('my-header', Xheader);

然后在HTML文件中，使用自定义元素显示该组件

<my-header></my-header>
<my-header></my-header>

最后推荐使用腾讯Omi框架封装web components组件。

Answer 2

看官方文档。
本来就是纯前端