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

Question

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

PolymerCommunityBot opened this issue 10 years ago · 4 comments

PolymerCommunityBot commented 10 years ago

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

Answer 1 · 2014-11-04T03:47:57.000Z

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

Answer 2 · 2015-03-09T17:47:51.000Z

Added to FAQs.

Answer 3 · 2015-06-03T19:00:19.000Z

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?

Answer 4 · 2015-10-28T23:32:13.000Z

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?