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

Closed
abritinthebay opened this Issue Sep 17, 2014 · 8 comments

Comments

Projects
None yet
2 participants
@abritinthebay
Contributor

abritinthebay commented Sep 17, 2014

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

This comment has been minimized.

Show comment
Hide comment
@abritinthebay

abritinthebay Sep 17, 2014

Contributor

(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)

Contributor

abritinthebay commented Sep 17, 2014

(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

This comment has been minimized.

Show comment
Hide comment
@abritinthebay

abritinthebay Sep 17, 2014

Contributor

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.

Contributor

abritinthebay commented Sep 17, 2014

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 comment has been minimized.

Show comment
Hide comment
@goldoraf

goldoraf Sep 18, 2014

Contributor

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.

Contributor

goldoraf commented Sep 18, 2014

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.

@goldoraf goldoraf changed the title from ShadowDOM elements not stylable to Transpiled CSS fails to correctly style shadowDOM nodes for browsers with native impl. Sep 18, 2014

@goldoraf goldoraf added this to the 0.6 milestone Sep 18, 2014

@abritinthebay

This comment has been minimized.

Show comment
Hide comment
@abritinthebay

abritinthebay Sep 18, 2014

Contributor

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.

Contributor

abritinthebay commented Sep 18, 2014

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

This comment has been minimized.

Show comment
Hide comment
@abritinthebay

abritinthebay Sep 19, 2014

Contributor

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 :(

Contributor

abritinthebay commented Sep 19, 2014

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 :(

abritinthebay added a commit to abritinthebay/transpiler that referenced this issue Sep 19, 2014

@goldoraf

This comment has been minimized.

Show comment
Hide comment
@goldoraf

goldoraf Sep 19, 2014

Contributor

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 ?

Contributor

goldoraf commented Sep 19, 2014

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 ?

@goldoraf goldoraf referenced this issue in bosonic-labs/yeoman-bosonic Sep 19, 2014

Closed

Adding support for raw component import (via link) #4

@abritinthebay

This comment has been minimized.

Show comment
Hide comment
@abritinthebay

abritinthebay Sep 19, 2014

Contributor

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.

Contributor

abritinthebay commented Sep 19, 2014

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

This comment has been minimized.

Show comment
Hide comment
@goldoraf

goldoraf Sep 15, 2015

Contributor

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

Contributor

goldoraf commented Sep 15, 2015

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

@goldoraf goldoraf closed this Sep 15, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment