Kevin, That does clear everything up. I appreciate you taking the time to put together such a thorough answer.
Thanks! On Friday, March 9, 2018 at 12:37:01 PM UTC-5, Kevin Schaaf wrote: > > > 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 > > > > > On Fri, Mar 9, 2018 at 8:09 AM Ronn Ross <[email protected] <javascript:>> > wrote: > >> 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 <[email protected]> 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 [email protected]. >>>> To view this discussion on the web visit >>>> https://groups.google.com/d/msgid/polymer-dev/5941199c-d974-4763-8c3f-51ac9068fef7%40googlegroups.com >>>> >>>> <https://groups.google.com/d/msgid/polymer-dev/5941199c-d974-4763-8c3f-51ac9068fef7%40googlegroups.com?utm_medium=email&utm_source=footer> >>>> . >>>> >>>> For more options, visit https://groups.google.com/d/optout. >>>> >>> >>> 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 [email protected] <javascript:>. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/polymer-dev/228b3eec-90a1-4ce2-982d-2b280543fa8b%40googlegroups.com >> >> <https://groups.google.com/d/msgid/polymer-dev/228b3eec-90a1-4ce2-982d-2b280543fa8b%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> For more options, visit https://groups.google.com/d/optout. >> > 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/941dd39f-c8b4-4d78-8bb7-54d577e28ebe%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
