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

【问题标题】：Web Component: How to access Shadow DOM through script in parent tag?Web 组件：如何通过父标签中的脚本访问 Shadow DOM？
【发布时间】：2015-01-30 06:14:30
【问题描述】：

我想使用导入文件中加载的 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。

【问题讨论】：

标签： html web-component shadow-dom

【解决方案1】：

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

  // 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

【讨论】：