WebComponents: как получить разрешенное значение слота в теневом DOM?

Question

У меня есть веб-компонент, и я хочу настроить значение его слота.

К сожалению, я не могу получить разрешенное значение из него.

Как я могу это сделать?

const template = document.createElement('template');
template.innerHTML = `
    <p><slot></slot></p>
`;

class MyComp extends HTMLElement {
    constructor() {
        super();
        this.root = this.attachShadow({mode: 'open'});
        this.root.appendChild(template.content.cloneNode(true));
    }

    connectedCallback() {
        const slot = this.shadowRoot.querySelector('slot');
        console.log('VALUE:', slot.innerText);  // always empty
    }
}

customElements.define('my-comp', MyComp);

<my-comp>abc</my-comp>

Answer 1

Вы можете назначить EventListener для отслеживания изменений SLOT

Документация MDN

• событие slotchange
• назначенные узлы

• :: slotted

• Как стилизовать последний элемент слота в веб-компоненте

customElements.define('my-element', class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({
        mode: 'open'
      }).appendChild(document.getElementById(this.nodeName).content.cloneNode(true));
    }

    connectedCallback() {
      this.listeners = [...this.shadowRoot.querySelectorAll("SLOT")].map(slot => {
        let name = "slotchange";
        let func = (evt) => {
          let nodes = slot.assignedNodes();
          console.log(`Slot ${slot.name} changed to ${nodes[0].outerHTML}`)
        }
        slot.addEventListener(name, func);
        return () => slot.removeEventListener(name, func); // return cleanup function!!!
      })
    }
    disconnectedCallback() {
      this.listeners.forEach(removeFunc => removeFunc());
    }
  });

<template id="MY-ELEMENT">
  <style>
    ::slotted(*) {
      background: yellow;
      margin: 0;
    }

    ::slotted(span) {
      color: red;
    }

  </style>
  <b>
    <slot name=title></slot>
  </b>
  <slot name=content></slot>
</template>

<my-element>
  <span slot="title">Hello World</span>
  <p slot="content">What a wonderful day!</p>
</my-element>
<my-element>
  <span slot="title">Hello Tomorrow</span>
  <p slot="content">What will you bring?</p>
</my-element>

JSFiddle: https://jsfiddle.net/CustomElementsExamples/vu9w1zyx/