WebComponents：如何获取影子 DOM 中插槽的解析值？答案

【问题标题】：WebComponents: how to get the resolved value of a slot in shadow DOM?WebComponents：如何获取影子 DOM 中插槽的解析值？
【发布时间】：2020-04-09 13:17:02
【问题描述】：

我有一个 Web 组件，我想调整其插槽的值。

很遗憾，我无法从中获取解析值。

我该怎么做？

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);

&lt;my-comp&gt;abc&lt;/my-comp&gt;

【问题讨论】：

标签： javascript html web-component native-web-component

【解决方案1】：

您可以分配一个 EventListener 来监视 SLOT 的变化

MDN 文档

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/

【讨论】：