ShadowCSS: :host-context(...):host(...) doesn't work

[PolymerCommunityBot]

Issue by frankiefu
Thursday Sep 11, 2014 at 22:27 GMT
Originally opened as https://github.com/Polymer/platform/issues/92

---

I have a rule like this:

:host-context(.foo):host(.bar) {...}

but it doesn't work under ShadowDOM polyfill. Works fine in native ShadowDOM.

jsbin: http://jsbin.com/nafasabitido/1/edit

[PolymerCommunityBot]

Comment by frankiefu
Friday Sep 12, 2014 at 21:44 GMT

---

Workaround is to use polyfill-next-selector, e.g.

polyfill-next-selector { content: '.foo :host.bar, :host.foo.bar'; }

jsbin: http://jsbin.com/pamoqonoceju/1/edit

[garlicnation]

Added to FAQs.

[lozandier]

Hey, it's sort of confusing how to actually adhere to this suggestion; based on how it's written in the FAQ it seems to create this thought: "So, the stuff within content will be replaced so other properties defined within polyfill-next-selector will make this selector work?

[indolering]

The JSBin example appears to be broken. Could you create a another one, preferably with an element styled in the traditional format and another with the polyfill-next-selector?