Transpiled CSS fails to correctly style shadowDOM nodes for browsers with native impl.

[abritinthebay]

In a browser that supports Shadow DOM (ie - Chrome) the transpiling to css will mean that all shadowDom code isn't styled.

for example:

<style>
    p { color: red; }
</style>

Will get transpiled to elementname p { color: red; } but this won't style P in the shadowDOM at all. The following SHOULD work:

<style>
    ::shadow p { color: red; }
</style>

But doesn't as it gets transpiled to elementname ::shadow p { color: red; } rather than elementname::shadow p { color: red; }

And obviously it wouldn't work for non-shadowDOM browsers. Polymer shims the Shadow DOM selectors it seems that Bosonic should probably transpile them (or rather - keep them correctly formatted and then duplicate the rules so non-shadowDOM browsers can access them).

Either way using Shadow DOM in Bosonic (in Shadown DOM supporting browsers) is a non-starter right now due to this.

[abritinthebay]

(note - this might be a transpiler issue, but as this is the general Bosonic issue I thought the general project was the best place to put it - could also be a shim/polyfill issue)

[abritinthebay]

I found a workaround for this btw, but it's currently not out-of-the-box supported but it does work.

add a link import like so <link rel="import" href="my-customelement.html"> in the head. So there is a workaround, but it's not exactly ideal - however if the yeoman generator is updated to fix that... it might work for now.

[goldoraf]

This issue has hurted us since the beginning, and is the main reason we didn't really use shadowDOM in our elements (x-tags style, in a sense).

The difficulty is to find something that works with:

• recent Chrome, shadowDOM fully impl.
• old Chrome, prefixed shitty shadowDOM
• other browsers

The fix I'm working on for the next version is to style the shadow DOM from the outside: if you have something like

<style>
    :host p { color: red; }
</style>

it will be transpiled in the external stylesheet into:

    elementname p, elementname::shadow p { color: red; }

This should work correctly in all cases if Bosonic overrides the shitty shadowDOM of old versions of Chrome. However, it obviously doesn't provide encapsulation. Even if I think composition is more important than encapsulation, we could simulate it by injecting some reset CSS directives into the element' stylesheet.

[abritinthebay]

Yes! Perfect, that's exactly how I'd have thought the transpiler would have to get around this.

That said - the workaround does work, so there's that. Maybe there is no need if that does the job... I dunno. It is the technically correct way to import the element by the spec so... I wonder if it's required to work around not having it.

[abritinthebay]

actually - can confirm that your suggest (inc shadow) is the only thing that will work - the include of the html doesn't actually fix everything sadly :(

[goldoraf]

Thanks for your PR, but I think there's a bit more work to do: I need to test this on all kind of browsers, in the 2 modes of transpilation (HTML imports and JS/CSS combo). I should be done by the end of the week, but it'll be released in 0.6, targeted for 10/01. Btw, there'll be some changes in the packaging (new packages: platform & core-elements). Did you have a look to the roadmap: https://groups.google.com/forum/?hl=fr#!topic/bosonic-dev/pTwIcyje_SE ?

[abritinthebay]

Fair enough :) This is how I had to patch it to get any of it working in Chrome for right now (otherwise it would be functionally useless for me atm, sadly). I guess if someone needs to get it working before the 0.6 release in a few weeks they can use that as a reference.

[goldoraf]

Elements transpilation has been removed due to the project reboot. Bosonic now uses the webcomponents.js polyfills, so the problem should be solved.