trying to style the shadow DOM from outside

I'm trying to style the text in the shadow dom without success. The only thing is that I want to do it from outside the shadow DOM. An other important thing, the Shadow dom styling should only apply to the shadow dom inside a '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 a bonus question, what exactly does

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

do ?