ShadowDOM encapsulated CSS style - ":root"/"html" should work?

edd...@gmail.com

unread,

Apr 7, 2016, 4:46:42 PM4/7/16

to Polymer

Hi

I don't know if ":root"/"html" styling inside a template styling should work, but it is useful and makes sense for encapsulation, no?

In my case, I want to use the "rem" size units, only inside the custom Polymer element, and relative to the wrapper/host font-size, but it doesn't seem to work

Am I missing something? Such functionality won't be possible?

Thankss

Takayoshi Kochi

unread,

Apr 7, 2016, 10:36:36 PM4/7/16

to edd...@gmail.com, Polymer

Unless spec changes, ":root" only matches the document root (i.e. document.documentElement or <html>)

and shadow root doesn't match.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1c73eb5b-7b6c-41bc-8ed5-dd9bb59f78a6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Takayoshi Kochi

edd...@gmail.com

unread,

Apr 8, 2016, 8:57:01 AM4/8/16

to Polymer, edd...@gmail.com

Thanks Takayoshi for your reply

Yes, I understand. Do you have any clue how to address this issue?

Takayoshi Kochi

unread,

Apr 11, 2016, 12:33:04 AM4/11/16

to Eden Dro, Polymer

On Fri, Apr 8, 2016 at 9:57 PM, <edd...@gmail.com> wrote:

Thanks Takayoshi for your reply

Yes, I understand. Do you have any clue how to address this issue?

I'm not a frontend engineer so I'd defer the answer to other experts, but

if I had to do, I would define some CSS custom property (e.g. --component-font-size: 20px;)

and use it (e.g. font-size { font-size: var(--component-font-size); }, or use it with calc().

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/86a2256c-1b23-4a87-b375-8a33c62fcc92%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Takayoshi Kochi

Steve Orvell

unread,

Apr 11, 2016, 2:31:22 PM4/11/16

to Takayoshi Kochi, Eden Dro, Polymer

This should also work: `:host > *`.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CADP2%3DhqB%3Du9jcZAABHo8vumkATmT7w5HihLuA4dX0PFn_W0f8w%40mail.gmail.com.

Reply all

Reply to author

Forward