【学习记录】 shadow-dom

优点：内部 dom结构 不向外暴露(可以设置)

网页结构更加简洁，同时外部样式不影响内部，比如html5 中 video 标签就使用了 shadow dom

shadow-dom 结构

使用

大致过程：

1. 创建 shadow host 类并继承 HTMLElement
2. 在类的构造函数中创建 shadow root 结点
3. 创建的结点都绑定到 shadow root 上
4. 在 customElements 注册 shadow host
5. 在 html 使用

代码如下(mdn的例子)：

class PopUpInfo extends HTMLElement {
  constructor() {
    super();
    // mode 有两个选项值：open 和 closed，表示是否可以通过 shadowRoot 属性
    // 获取 shadow dom，从而对内部 dom 进行一些操作
    var shadow = this.attachShadow({ mode: 'open' });

    // create span
    var wrapper = document.createElement('span');
    wrapper.setAttribute('class', 'wrapper');
    var icon = document.createElement('span');
    icon.setAttribute('class', 'icon');
    icon.setAttribute('tabindex', 0);
    var info = document.createElement('span');

    // get props and append to info element
    var text = this.getAttribute('text');
    info.textContent = text;

    // insert icon
    var imgUrl;
    if (this.hasAttribute('img')) {
      imgUrl = this.getAttribute('img');
    } else {
      imgUrl = 'img/default.png';
    }

    var img = document.createElement('img');
    img.src = imgUrl;
    icon.appendChild(img);

    // create a style element
    // add style on tag's attributes or create a style element
    // or through <link> get it

    // vay style = document.createElement('style');
    // ...

    // shadow.appendChild(style);
    shadow.appendChild(wrapper);
    shadow.appendChild(icon);
    shadow.appendChild(info);
  }
}

// define a new element
customElements.define('popup-info', PopUpInfo);

// html file
<popup-info img="213.png" text="build a shadow dom"></popup-info>

一些操作

1.外部如何对内部的进行 dom 操作？

// 前提 {mode:'open'}
var shadowRoot = document.querySelector('popup-info').shadowRoot;

2.外部如何对内部的进行 样式操作？

通过 伪类(兼容差) 或者使用 link 标签链接外部样式表，属性传值也能达到效果

3.其他

组件通信通过属性绑定即可完成