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" <ronn.r...@gmail.com> 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 <ronn...@gmail.com> 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 polymer-dev...@googlegroups.com.
>>> 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 polymer-dev+unsubscr...@googlegroups.com.
> 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 polymer-dev+unsubscr...@googlegroups.com.
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.

Reply via email to