Fatal编程技术网
  • javascript/
  • Javascript 尝试从外部设置阴影DOM的样式

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

javascript html css

Javascript 尝试从外部设置阴影DOM的样式,javascript,html,css,shadow-dom,Javascript,Html,Css,Shadow Dom,我试图在阴影dom中设置文本样式，但没有成功。唯一的一件事是，我想在阴影DOM之外做这件事。另一件重要的事情是，shadowdom样式应该只应用于“bar”元素中的shadowdom。以下是我的测试代码： <!doctype html> <html> <head> <style> :host(bar) span:first-child { text-transform: uppercase;

我试图在阴影dom中设置文本样式，但没有成功。唯一的一件事是，我想在阴影DOM之外做这件事。另一件重要的事情是，shadowdom样式应该只应用于“bar”元素中的shadowdom。以下是我的测试代码：

<!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>
做什么？

影子DOM规范目前仍在开发中，它的大部分功能都在不断地发生根本性的变化

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

如果浏览器尚不支持它，则需要通过向其添加pseudo属性，
，然后在css
卷影主机：：myname
中引用该pseudo元素，将要设置样式的元素公开为其父元素的伪元素

至于您的“奖金”问题，您引用的是影子主机元素，但仅当影子主机是
元素时，如果您省略了第二个
：host
，您引用的影子主机是
元素或有一个作为其祖先

请注意，由于API正在不断开发中，因此上述信息在一个多月后可能无法保持可靠。

nice，thnx。我刚刚注意到bar^span{…}可以工作，但是bar^span:first child{…}不能（ChromeV34）。这可能与所有这些都是“实验性的”有关@JeanlucaScaljeri CSS在阴影dom中的顺序现在相当阴暗，因此如果您希望以第一个跨度为目标，您可能希望尝试
span:first of type
，在父元素中包装您的shadowdomhtml可能也会解决很多问题。我也试着用了一个，但似乎根本不起作用。他们不支持css中的“^”吗？@JeanlucaScaljeri shadow DOM不能被polyfills复制，它是一个全新的设计实现（新的HTML节点、新的css类、伪类和选择器、新的javascript方法等），只是为了复杂和大而正确地进行polyfill.has/deep/消失了吗？ 
:host(bar:host) { ... }