Child html within lit-html

[Ronn Ross]

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!

[Karl Tiedt]

Look at the slot API discussed on both the polymer website and the MDN website.

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/c25cc110-144d-46a2-9aff-0eae71de366c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Justin Fagnani]

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`>

    `;

  }

}

Follow Polymer on Google+: plus.google.com/107187849809354688692

[Ronn Ross]

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? 

To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

[Justin Fagnani]

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.

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/e8a356c2-75db-4f40-a9ea-ca1ca67693a5%40googlegroups.com.

[fredygo...@gmail.com]

Justin

What if my project does not use shadowdom because it is too intrusive in FF. I guess slots are useless. How can I still achieve child projection?

Regards,

Fredy A Gomez

To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.