Lit-element: How can I know slot is slotted?

Created on 20 Mar 2019  路  1Comment  路  Source: Polymer/lit-element

import { LitElement, html,customElements } from 'lit-element';


class MyElement extends LitElement {

  render(){
    const {slotted} = this;  //how to get this slotted variable
    return html`
      <p>
          <slot></slot>
           ${slotted ? 'has slot' : 'no slot'}
      </p>
    `;
  }
}
customElements.define('my-element', MyElement);
```html
<my-elemen></my-elemen>
<my-elemen>test</my-elemen>
  1. Question
    in MyElement' render function, how can I get a variable to tell me the slot is slotted?
API

Most helpful comment

By "slotted" do you mean that element children have been assigned to the slot? I'm going to assume that's the case.

To see what elements are assigned to a <slot>, call assignedNodes() on the slot (docs).

To be informed of of changes to the assignedNodes() of a slot, you can listen to the slotchange event on the <slot> (docs).

>All comments

By "slotted" do you mean that element children have been assigned to the slot? I'm going to assume that's the case.

To see what elements are assigned to a <slot>, call assignedNodes() on the slot (docs).

To be informed of of changes to the assignedNodes() of a slot, you can listen to the slotchange event on the <slot> (docs).

Was this page helpful?
0 / 5 - 0 ratings