写给小白的教程之WebComponent(1)

1,154 阅读3分钟

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 元素一样

  • 如下图

image.png

  • 想将一个 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>

4、磨拳擦掌,怎么使用 ?

  1. 创建一个类或函数来指定 web 组件的功能,如果使用类,请使用 ECMAScript 2015 的类语法 (参阅获取更多信息)。
  2. 使用 CustomElementRegistry.define() 方法注册您的新自定义元素,并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。
  3. 如果需要的话,使用Element.attachShadow() 方法将一个 shadow DOM 附加到自定义元素上。使用通常的 DOM 方法向 shadow DOM 中添加子元素、事件监听器等等。
  4. 如果需要的话,使用 <template> 和<slot> 定义一个 HTML 模板。再次使用常规 DOM 方法克隆模板并将其附加到您的 shadow DOM 中。
  5. 在页面任何位置使用自定义元素,就像使用HTML DIV一样(为例)

5、实现一个 Button

  • 上面那段话 请忘掉!!! , 我们 写给 Button 试试

1、创建一个类来指定 web 组件的功能

customElements.define('mark-button', Button);

2、使用Element.attachShadow() 方法将一个 shadow DOM 附加到自定义元素上

    const shadowRoot = this.attachShadow({ mode: 'open' });
    const btn = document.createlement('button');
    btn.appendChild(templateContent.cloneNode(true));
    btn.setAttribute('class', 'mark-button');

3、使用 <template> 和<slot> 定义一个 HTML 模板

<template id="btn_tpl">
  <slot name="btn-content">button content  xxx</slot>
</template>

4、使用

<mark-button type="primary"><span slot="btn-content" id="btn_show">button test1</span></mark-button>
<mark-button type="warning"><span slot="btn-content">button test2</span></mark-button>
<mark-button type="default"><span slot="btn-content">button test3</span></mark-button>

5、添加点击事件

document.querySelector('#btn_show').addEventListener('click', () => {
    modal.setAttribute('visible', 'true');
}, false)

6、效果

Kapture 2022-09-28 at 18.28.31.gif

  • 完整代码
// index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Component</title>
  </head>
  <body style="padding: 60px">
    <h1>Web Component 马克付</h1>
    <h2>1. Button</h2>
    <mark-button type="primary"
      ><span slot="btn-content" id="btn_primary"
        >button test1</span
      ></mark-button
    >
    <mark-button type="warning"
      ><span slot="btn-content" id="btn_danger">button test2</span></mark-button
    >
    <mark-button type="default"
      ><span slot="btn-content">button test3</span></mark-button
    >

    <!-- template定义区 -->
    <template id="btn_tpl">
      <slot name="btn-content">button content xxx</slot>
    </template>

    <script src="components/button.js"></script>
    <script>
      document.querySelector('#btn_primary').addEventListener(
        'click',
        () => {
          alert('我是 btn_primary ,我被点击了')
        },
        false
      )

      document.querySelector('#btn_danger').addEventListener(
        'click',
        () => {
          alert('我是 btn_danger 我很危险')
        },
        false
      )
    </script>
  </body>
</html>

// Button.js
class Button extends HTMLElement {
  constructor() {
    super();
    // 获取模板内容
    let template = document.getElementById('btn_tpl');
    let templateContent = template.content;

    const shadowRoot = this.attachShadow({ mode: 'open' });
    const btn = document.createElement('button');
    btn.appendChild(templateContent.cloneNode(true));
    btn.setAttribute('class', 'mark-button');
    // 定义类型  primary | warning | default
    const type = {
      'primary': '#06c',
      'warning': 'red',
      'default': '#f0f0f0'
    }
    const btnType = this.getAttribute('type') || 'default';
    const btnColor = btnType === 'default' ? 'pink' : '#fff';

    // 创建样式
    const style = document.createElement('style');
    // 为shadow Dom添加样式
    style.textContent = `
      .mark-button {
        position: relative;
        display: inline-block;
        padding:8px 20px;
        border-radius: 50px;
        margin-right: 3px;
        background-color: ${type[btnType]};
        color: ${btnColor};
        box-shadow: inset 0 5px 10px rgba(0,0,0, .3);
        cursor: pointer;
      }
    `
    shadowRoot.appendChild(style);
    shadowRoot.appendChild(btn);
  }
}
customElements.define('mark-button', Button);

代码细节和代码仓库

  • 感谢 支持 点个 star 点个赞吧 ! 祝大家暴富!