掌握Shadow DOM（译）

了解Web组件和自定义元素以及Shadow DOM如何工作，使我们能够封装的可重用组件。下面这个例子展示了如何使用这些技术创建一个Web组件。

定义我们的标签

// blink.js
const Blink = (function() {
  "use strict";

  class Component extends HTMLElement {
    constructor() {
      super();
      // Create shadow root
      const shadow = this.attachShadow({
        mode: "open"
      });

      // Wrap text content with a span tag
      const wrapper = document.createElement("span");

      // Make a slot for text
      const slot = document.createElement("slot");
      slot.setAttribute("name", "content");
      wrapper.appendChild(slot);

      // CSS animation styles ：动画效果
      const style = document.createElement("style");
      style.textContent = `
        @keyframes blink {
          0%   { visibility: hidden; }
          50%  { visibility: hidden; }
          100% { visibility: visible; }
        }
        /* :host selects shadow root host */
        :host { animation: 1s linear infinite blink; }
      `;

      // Append
      shadow.appendChild(wrapper);
      wrapper.appendChild(style);
    }
  }
  customElements.define("wc-blink", Component); // 不能直接使用 <blink> ，因为blink是保留关键字
})();

export { Blink };

使用

<script>
  import { Blink } from "./blink.js";
</script>

<wc-blink>
  <h1 slot="content">
    hello, I'm blinking!
  </h1>
</wc-blink>

如果想在普通浏览器中通过html文件快速查看代码效果，可以将blink.js直接以script形式引入，将blink.js底部的export { Blink } 去掉即可

实现效果：

blink效果

查看浏览器中DOM元素

浏览器中DOM元素

原文：这里