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？

1 个答案: