@blockquote-web-components/blockquote-mixin-slot-c

BlockquoteMixinSlotContent is a mixin for managing the flattened set of nodes assigned to a slot when the node(s) contained in some slot change.

Demo

Usage

BlockquoteMixinSlotContent implements the event handling pattern called event delegation.

It's necessary to set up the "catch-all" handler on this.shadowRoot node.

this.shadowRoot.addEventListener('slotchanges', this._onSlotChanges.bind(this));

Example:

class SlotElement extends BlockquoteMixinSlotContent(LitElement) {
  // ...
  connectedCallback() {
    super.connectedCallback && super.connectedCallback();
    this.shadowRoot.addEventListener('slotchanges', this._onSlotChanges.bind(this));
  }

  _onSlotChanges(ev) {
    const { detail } = ev;
    console.log(detail);
  }
  // ...
}

Caveats with whitespace:

It's important to understand some of the nuances between text nodes that contain text and text nodes that contain only whitespace.

<slot-element>
  nodeText1
  <p>Element 1</p>
  <p>Element 2</p>
</slot-element>

assignedNodes returns 5 Nodes

assignedNodes: Array(5)
0: text // textContent: "\n        nodeText1\n        "
1: p    // textContent: "Element 1"
2: text // textContent: "\n        "
3: p    // textContent: "Element 2"
4: text // textContent: "\n        "
length: 5

Also, another problem with whitespace is that when the content is just whitespace, assignedNodes are no longer able to return flattened nodes.

without `whitespace`

<slot-element>
  #shadow-root
  <slot>
    <img src="icon.svg" />
  </slot>
</slot-element>

<slot-element>Hello</slot-element>

document.querySelector('slot-element').textContent = '';

// assignedNodes [`img`]

with `whitespace`

<slot-element>
  #shadow-root
  <slot>
    <img src="icon.svg" />
  </slot>
</slot-element>

<slot-element>Hello</slot-element>

document.querySelector('slot-element').textContent = ' ';

// assignedNodes [`#text`]
// * missing `flattened` node

The `detail property` - keeping that in mind.

The mixin will return only nodes whose content is not whitespace and equally for flattened nodes.

<slot-element>
  #shadow-root
  <slot>
    <img src="icon.svg" />
  </slot>
</slot-element>

<slot-element>
  <p>sdfas</p>
  <p>2jfie</p>
</slot-element>

`event.detail`

{
  "assignedSlotContent": {
    "slotName": "",
    "assignedSlot": slot
  },
  "assignedNodesContent": {
    "assignedNodesByNode": [
      {
        "flatten": false,
        "assignedNodes": p,
        "assignedSlot": slot
      },
      {
        "flatten": false,
        "assignedNodes": p,
        "assignedSlot": slot
      }
    ],
    "assignedNodes": [p, p]
  },
  "flattenedNodesContent": {
    "assignedNodesByNode": [
      {
        "flatten": true,
        "assignedNodes": img,
        "assignedSlot": null
      }
    ],
    "assignedNodes": [img]
  },
  "originalEvent": {
    "event": {
      "isTrusted": true,
      "type": "slotchange",
      "target": null,
      "currentTarget": null,
      // ...
    },
    "assignedNodes": [text, p, text, p, text, text, text]
  }
}

<slot-element>
  #shadow-root
  <slot></slot>
</slot-element>

<slot-element> </slot-element>

`event.detail`

{
  "assignedSlotContent": {
    "slotName": "",
    "assignedSlot": null
  },
  "assignedNodesContent": {
    "assignedNodesByNode": [],
    "assignedNodes": []
  },
  "flattenedNodesContent": {
    "assignedNodesByNode": [],
    "assignedNodes": []
  },
  "originalEvent": {
    "event": {
      "isTrusted": true,
      "type": "slotchange",
      "target": null,
      "currentTarget": null,
      // ...
    },
    "assignedNodes": [text]
  }
}