WebComponents使用及引用外部样式方式

前言

上海最近疫情严重，大家珍重。我们还好，只不过处于封控范围之内，足不出户，在家办公。今天主要讲一下web components，其实web components 封闭组件应用还是蛮广泛的，例如H5广告组件，H5封装音乐组件等等。

webComponents demo

自定义的 HTML 标签，称为自定义元素（custom element）。根据规范，自定义元素的名称必须包含连词线，用与区别原生的 HTML 元素。所以，不能写成。

html

<haorooms-card
  image="https://www.haorooms.com/theme/assets/images/htmlyasuo.jpg"
  name="haorooms博客"
  email="haorooms@haorooms.com"
></haorooms-card>
<template id="haoroomsTemplate">
  <style>
   :host {
     display: flex;
     align-items: center;
     width: 450px;
     height: 180px;
     background-color: #d4d4d4;
     border: 1px solid #d5d5d5;
     box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
     border-radius: 3px;
     overflow: hidden;
     padding: 10px;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
   }
   .image {
     flex: 0 0 auto;
     width: 160px;
     height: 160px;
     vertical-align: middle;
     border-radius: 5px;
   }
   .container {
     box-sizing: border-box;
     padding: 20px;
     height: 160px;
   }

  </style>

  <img class="image">
  <div class="container">
    <p class="name"></p>
    <p class="email"></p>
    <button class="button">haorooms博客</button>
  </div>
</template>

js

class HaoroomsCard extends HTMLElement {
  constructor() {
    super();
    var shadow = this.attachShadow( { mode: 'closed' } );

    var templateElem = document.getElementById('haoroomsTemplate');
    var content = templateElem.content.cloneNode(true);
    content.querySelector('img').setAttribute('src', this.getAttribute('image'));
    content.querySelector('.container>.name').innerText = this.getAttribute('name');
    content.querySelector('.container>.email').innerText = this.getAttribute('email');

    shadow.appendChild(content);
  }
}
customElements.define('haorooms-card', HaoroomsCard);

上面代码中，this.attachShadow()方法的参数{ mode: 'closed' }，表示 Shadow DOM 是封闭的，不允许外部访问。

Web Components中引入外部CSS

我们在开发组件的时候，经常可能要引入外部样式，或者公共样式。那么如何引入外部样式呢？

1、@import方法

class uiRange extends HTMLElement {
    constructor () {
        super();
        // 附加Shadow DOM
        this.attachShadow({
            mode: 'open'
        });
        // 创建样式
        let node = document.createElement('style');
        node.innerHTML = `@import './haorooms.css';`;
        this.shadowRoot.append(node);
    }
    ...
}
if (!customElements.get('ui-range')) {
    customElements.define('ui-range', uiRange);
}

2、fetch获取

class uiRange extends HTMLElement {
    constructor () {
        super();
        // 附加Shadow DOM
        this.attachShadow({
            mode: 'open'
        });
        // 获取样式
        fetch('./haorooms.css').then(response => response.text()).then(data => {
            let node = document.createElement('style');
            node.innerHTML = data;
            this.shadowRoot.appendChild(node);
        });
    }
    ...
}
if (!customElements.get('ui-range')) {
    customElements.define('ui-range', uiRange);
}

3、作为CSS module import

import styles from './haorooms.css';
class uiRange extends HTMLElement {
    constructor () {
        super();

        let shadow = this.attachShadow({
            mode: 'open'
        });
        shadow.adoptedStyleSheets = [styles];
    }
    ...
}
if (!customElements.get('ui-range')) {
    customElements.define('ui-range', uiRange);
}

关于adoptedStyleSheets

adoptedStyleSheets这个API方法是随着样式表构造（Constructed StyleSheets）一起出现的。

存在与shadowRoot和document两个对象上，用来设置样式。

小结

web components 随着浏览器的发展，后面应用将越来越多，上面简单介绍了其用法及引入外部样式的方式，具体api可以参考mdn上面https://developer.mozilla.org/zh-CN/docs/Web/Web_Components