首页 > 编程语言> > javascript – 尝试从外部设置阴影DOM的样式

javascript – 尝试从外部设置阴影DOM的样式

2019-06-12 16:24:03 作者：互联网

我试图在阴影dom中设置文本样式而没有成功.唯一的问题是我想从影子DOM之外做这件事.另一个重要的事情,Shadow dom样式应该只适用于’bar’元素内的阴影dom.这是我的测试代码：

<!doctype html>

<html>
  <head>
    <style>
      :host(bar) span:first-child {
        text-transform: uppercase;
        color: green;
      }
    </style>
  </head>

  <body>
    <bar></bar>

    <script>
      var bar = document.querySelector('bar');
      var root = bar.createShadowRoot();
      root.innerHTML = '<span>bar</span><span>foo</span>';
    </script>
  </body>
</html>

还有一个奖金问题,究竟是什么

:host(bar:host) { ... }

做什么？

解决方法:

shadow DOM规范目前仍处于开发阶段,其大部分功能从一个时刻到下一个时刻发生了根本性的变化.

要从外部设置阴影DOM元素的样式,取决于您的浏览器是依赖于(过时的)peusdo元素曝光还是新的css阴影dom选择器^^(cat)和^(hat)
如果浏览器支持新语法,您只需使用hat(^)选择器输入元素shadow dom,或者如果您希望跨越所有阴影边界,则可以使用cat(^^)选择器执行此操作.

如果浏览器尚不支持它,则需要通过向其添加伪属性< shadow-element peusdo =“myname”/&gt ;,并将您想要样式化的元素作为其父元素的伪元素公开,并且然后在你的css shadow-host :: myname中引用那个伪元素至于你的“奖金”问题,你引用了影子主机元素,但只有当影子主机是< bar>时才会引用它. element,如果省略第二个：host,则引用一个< bar>的影子主机.元素或有一个作为其祖先.

请注意,由于API处于不断发展阶段,因此上述信息可能在一个多月左右的时间内仍然不可靠.

标签：javascript,html5,css3,shadow-dom
来源： https://codeday.me/bug/20190612/1226840.html