Web组件：如何通过父标记中的脚本访问Shadow DOM？-Java 学习之路

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

1 回答

阴影根可通过 #querySelector(sel).shadowRoot 访问 . 下面的示例显示了访问本机div和ShadowDOM中的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

回复于 2024-04-30T03:52:00+08:00

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

1 回答

相关问题