Geek Answers Handbook

Trying to create a DOM shadow from the outside

I am trying to style text in the shadow of dom without success. The only thing I want to do is because of the shadow of the DOM. Another important thing: the Shadow dom style should only be applied to the shadow domino inside the bar element. Here is my test code:

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

And the bonus question is what exactly does

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

do?

+4
source share
1 answer

The specification of the shadow DOM is still under development, most of its functionality is radically changing from one moment to another.

DOM , , () peusdo- css ^^ (cat) ^ (hat) , shadow dom (^), , cat (^^), .

, , , , - <shadow-element peusdo="myname" />, css shadow-host::myname

"", , <bar>, :host, , <bar> .

, API , .

+7

More articles:


All Articles