web component

通过custom elements 创建内联的 css和js的自定义元素。

web components 是web一系列标准规范：

• custom elements 自己创建html标签
• shadow dom ，页面插入dom，提供组件封装 样式隔离
• html template 引用 template slot

技术栈无关。一定的封装复用能力，样式隔离

有全局 window.CustomElementRegistry 变量：

• define 定义新的 custom element
• get 获取 ce 的 constructor
• upgrade 类似 get ，返回单是promise

如何创建 ce？

• 先定义一个html元素。 先定义一个类，初始化构造器，补充结构
• 注册 window.customElements.define('custom-title',CustomTitle)
• 页面中使用 <custom-title /> ``javascript class CustomTitle extends HTMLElement { constructor() { super() this.attachShadow({ mode: 'open' }) this.shadowRoot.innerHTML =

  <style>
    h1 {
      font-size: 40px;
      color: #000;
    }
  </style>
  <h1>Hello WC!</h1>

  ` } }

window.customElements.define(‘custom-title’,CustomTitle) ``` define 注册

掘金
https://juejin.cn/post/6941242770174509093
https://juejin.cn/post/6937655765448523813
https://juejin.cn/post/6959138179664314398
https://juejin.cn/post/6933158851579494408
https://juejin.cn/post/6950454724734746660
https://juejin.cn/post/6932675132284633101
https://juejin.cn/post/6844904034508226574

https://juejin.cn/post/6844904022877405197

google web comopnenet
https://developers.google.com/web/fundamentals/web-components