Safari and Opera support Shadow DOM, Firefox has it under development. The polyfills work, and lit-html has ShadyCSS integration as of 0.9.0.
On Feb 19, 2018 10:26 AM, "Ronn Ross" <[email protected]> wrote: > Thanks everyone. I also read about slot on MDN and it makes sense. I saw > that chrome only supports this, so will this be covered by the polyfill in > other browsers? > > On Monday, February 19, 2018 at 11:27:00 AM UTC-5, Justin Fagnani wrote: >> >> For projecting child content, you need to use <slot>s: >> https://developers.google.com/web/fundamentals/web- >> components/shadowdom#slots >> >> class MyButton extends LitElement { >> constructor(...args) { >> super(); >> } >> >> render() { >> return html` >> <button class="primary" type="button"> >> <slot></slot> >> </button`> >> `; >> } >> } >> >> On Mon, Feb 19, 2018 at 8:18 AM, Ronn Ross <[email protected]> wrote: >> >>> I have a simple button component. >>> >>> >>> I trying to get the child content and pass it through to the button. >>> Here is an example: >>> >>> <my-button> >>> this is some <i>content</i> >>> </my-button> >>> >>> I can't figure out how MyButton can pass along the children >>> >>> class MyButton extends LitElement { >>> constructor(...args) { >>> super(); >>> } >>> >>> render({children}) { >>> return html` >>> <button class="primary" type="button"> >>> ${children} >>> </button> >>> ` >>> } >>> } >>> >>> >>> I tried capturing all the args pass into render and the constructor, but >>> found nothing that I can use to capture the content. Can someone point me >>> in the right direction? >>> >>> Thanks! >>> >>> 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/ms >>> gid/polymer-dev/c25cc110-144d-46a2-9aff-0eae71de366c%40googlegroups.com >>> <https://groups.google.com/d/msgid/polymer-dev/c25cc110-144d-46a2-9aff-0eae71de366c%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/e8a356c2-75db-4f40-a9ea-ca1ca67693a5%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/e8a356c2-75db-4f40-a9ea-ca1ca67693a5%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/CAEKsHmDUZTZF3fRTL9xwadymoxVXjRNzEk2x2ppFy5GnyVLphQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
