Allow components to use global CSS

[Ronn Ross]

Hi I'm using polymer 3, and lit-html. I am defining a set of components and using Tachyons to style them. Tachyons is provided by the page that loads the components. As of now my components do not by default see the global styles. Is there a way to set them up to do so? 

[Ronn Ross]

I guess I should clarify that I'm not talking about the need to create a style module. I pull tachyons in from a CDN in the html page. I am just looking for a way for the components to be able to see all those global styles. Thanks!

[Karl Tiedt]

The whole point of Web Components is to prevent global styles from infringing on your components... you would basically need to include the CSS in every component similar to how the style-modules of 2.x did...

-Karl Tiedt

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+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5941199c-d974-4763-8c3f-51ac9068fef7%40googlegroups.com.

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

[Ronn Ross]

I see, but shouldn't this be a choice for the implementer? I can see uses both use cases. For my use case all the styles are global. Just for my understanding; It is impossible to see a style outside of a web component? If the answer is yes, then how does one keep from duplicating styles and attempt some reuse? 

On Friday, March 9, 2018 at 10:56:38 AM UTC-5, Karl Tiedt wrote:

The whole point of Web Components is to prevent global styles from infringing on your components... you would basically need to include the CSS in every component similar to how the style-modules of 2.x did...

-Karl Tiedt

On Fri, Mar 9, 2018 at 8:34 AM, Ronn Ross <ronn...@gmail.com> wrote:

I guess I should clarify that I'm not talking about the need to create a style module. I pull tachyons in from a CDN in the html page. I am just looking for a way for the components to be able to see all those global styles. Thanks!

On Friday, March 9, 2018 at 9:30:21 AM UTC-5, Ronn Ross wrote:

Hi I'm using polymer 3, and lit-html. I am defining a set of components and using Tachyons to style them. Tachyons is provided by the page that loads the components. As of now my components do not by default see the global styles. Is there a way to set them up to do so? 

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.

[Kevin Schaaf]

> It is impossible to see a style outside of a web component? If the answer is yes, then how does one keep from duplicating styles and attempt some reuse?

Browsers implementing Shadow DOM have optimizations to ensure that duplicating the same <style> tag in the shadow DOM of element instances is low-cost.  If your question is practically, "how do I share styles between two elements using lit-html?", the pattern we are leaning towards are putting common styles in modules that e.g. export const sharedStyles = html`<style>/*shared styles...*/</style>`, import that into the element code, and then interpolate that into the template during render()ing.  

> I see, but shouldn't this be a choice for the implementer?

That said, we do in fact give you the choice. When using LitElement, you can override the default implementation of `_createRoot` (which creates and returns the shadow root on the element) to return `this`, to achieve rendering into the element's light DOM and forgo DOM & style encapsulation.

Note that opting to do this means you lose child distribution via <slot> , you expose the rendering to the outside world making it susceptible to inadvertent styling and/or DOM manipulation, and it generally means the component cannot be used inside an element that does encapsulate its rendering using Shadow DOM, since global styles will not reach it.  As such, this is a choice that may be reasonable to make for app-specific elements to deal with legacy global CSS, but should generally never be made for reusable elements, since you lose all guarantees of reusability granted by encapsulation and open back up a lot of the problems that web components solve for making UI components reusable in any context.

Hope that clears it up.

Kevin

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/228b3eec-90a1-4ce2-982d-2b280543fa8b%40googlegroups.com.

[Ronn Ross]

Kevin,

That does clear everything up. I appreciate you taking the time to put together such a thorough answer.

Thanks!