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/
> msgid/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/CAEKsHmAFqkbu3O%2BbUZaU2h5ZOn12JbCB%2BuNQD0yDgeJdwqPhzg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
