如何创建 Shadow DOM?

  1. <div class="dom"></div>
  1. let el = document.querySelector('.dom');
  2. el.attachShadow({ mode: 'open' });
  3. // Just like prototype & constructor bi-directional references, we have...
  4. el.shadowRoot; // the shadow root.
  5. el.shadowRoot.host; // the element itself.
  7. // put something in shadow DOM
  8. el.shadowRoot.innerHTML = 'Hi I am shadowed!';
  10. // Like any other normal DOM operation.
  11. let hello = document.createElement('span');
  12. hello.textContent = 'Hi I am shadowed but wrapped in span';
  13. el.shadowRoot.appendChild(hello);

Q&&A - 我们能否使用 append() 来取代 “appendChild() ?

当然可以！但是在 MDN文档里，这两种方法有一些区别。

  • ParentNode.append() 允许你添加 DOMString 对象；然而 Node.appendChild() 仅仅接受Node对象
  • ParentNode.append() 没有返回值； 然而Node.appendChild() 返回添加的 Node 对象.
  • ParentNode.append() 可以添加多个节点和字符串；然而 Node.appendChild()只能添加一个 node 节点

如果我们使用 input 元素而不是 div 元素关联 shadow DOM，会怎样？

好吧，这并没有什么作用。因为浏览器早已设定为这些元素设定好了他们的shadow DOM。当你这样做之后，浏览器控制条会飘出一串红色的英文字母。?