写给小白的教程之WebComponent（1）

我心飞翔发布于 1年前分类：vue

1、为啥会有这一篇？

前两天有个同学问我，然后组内同学也即将分享相关实践内容，此处在他之前发出（早一天发布的发布会），good!

2、是何物？

组件化是前端非常重要的一块内容，现在流行的 React 和 Vue 都是组件框架。

谷歌 Chrome 一直在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简单直接，不用加载任何外部模块，代码量小。当前发展较为成熟，在很多项目中被使用

广受好评！

3、基本概念早知道

Web Components主要由三项技术组成，分别为

Custom elements（自定义元素）

Shadow DOM（影子DOM）

HTML templates（HTML模板）

自定义元素实例

customElements.define(
'test-custom',   // name 
class TestCustom extends HTMLParagraphElement {   // 这个类定义功能
  constructor() {
    super();

    // 功能代码
    ...
  }
}, { extends: 'p' }); // 继承自哪个元素 此处 p

影子 DOM

Shadow DOM 可将隐藏的 DOM挂到一个元素上，且 shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样

如下图

想将一个 Shadow DOM 附加到 custom element 怎么做？

class Button extends HTMLElement {
  constructor() {
    super();
    let shadow = this.attachShadow({mode: 'open'}); // 挂到 构造函数上
  }
}

操作一下也是 ok 的

class Button extends HTMLElement {
  constructor() {
    super();
    let shadow = this.attachShadow({mode: 'open'});
    let p = document.createElement('p');
    shadow.appendChild(p);
  }
}

我想添加样式怎么办？

let mySelfStyle = document.createElement('style');

mySelfStyle.textContent = `
    .btn-container {
      position: relative;
    }
    .btn {
        // ...
    }
`

shadow.appendChild(mySelfStyle);

good !

HTML模版

类似于 html 结构和 vue slot

<html>
    <template>
        <h1><slot name="title"></slot></h1>
        <p><slot name="description"></slot></p>
    </template>
</html>

更多细节和完整内容，请点击https://juejin.cn/post/7148620121886425125，感谢阅读～

我来回复

暂无回复内容