Web 组件：如何通过父标签中的脚本访问 Shadow DOM？

Question

我想使用导入文件中加载的 JavaScript 代码访问 Shadow DOM 中的标签。

比如说，我的自定义元素有一个 div

<div>I am custom element</div>

我想从自定义元素导入文件中加载的脚本访问这个标签

<!doctype html>
<html >
<head>
  <link rel="import" href="x-component.html">
</head>
<body>
    <div>I am parent element</div>
    <x-component></x-component>
    <script>
       $('div').html('I replaced all div html');
    </script>
</body>
</html>

假设在上面的例子中使用jQuery。

Answer 1

影子根可以通过 #querySelector(sel).shadowRoot 访问。下面的示例显示了访问原生 div 和访问 Shadow DOM 中的 div 之间的区别。

  // native divs
  var divs = Array.prototype.slice.call(
               document.getElementsByTagName('DIV')
             );

  divs.forEach(function(e) {
    e.innerHTML = 'CHANGED';
  });

  // access shadowed divs
  var shadowDivs = Array.prototype.slice.call(
                     document.querySelector('x-component').shadowRoot.children
                   ); // or .querySelector('div')

  shadowDivs.forEach(function(e) {
    if(e.constructor === HTMLDivElement) { // divs only
      e.innerHTML = 'CHANGED IN SHADOW';
    }
  });

实时预览：http://plnkr.co/edit/lNeTWF28jHP01ORCcAgU?p=preview

Web 组件：如何通过父标签中的脚本访问 Shadow DOM？

Web Component: How to access Shadow DOM through script in parent tag?

html

web-component

shadow-dom