在自定义元素阴影中选择槽文本 DOM

Question

我用正则 html/css/js 制作了一个简单的复制粘贴组件。我试图将它变成一个网络组件，但无法再让复制粘贴行为起作用。

阴影里面的标记 DOM 基本上是

<span contenteditable="true">
  <slot></slot>
</span>
<button>Copy</button>

Javascript:

class CopyPaste extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.appendChild(copyPasteTemplate.content.cloneNode(true));
  }

  connectedCallback() {
    let copyButton = this.shadowRoot.querySelector('button');
    let textToCopy = this.shadowRoot.querySelector('span');

    function selectElementContents(el) {
      var range = document.createRange();
      range.selectNodeContents(el);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    }

    function copyText() {
      selectElementContents(textToCopy);
      document.execCommand('copy');
    }

    copyButton.addEventListener('click', copyText);
    textToCopy.addEventListener('click', copyText);
  }
}

window.customElements.define('copy-paste', CopyPaste);

Answer 1

在您的示例中，textToCopy 变量引用 <slot> 元素，其中没有文本。

如果要从<copy-paste>元素的light DOM获取分布式节点，应该使用<slot>元素的assignedNodes()方法：

let textToCopy = this.shadowRoot.querySelector('slot').assignedNodes()[0];

PS：请注意，contenteditable 属性可能无法像您在给定示例中预期的那样工作。

在自定义元素阴影中选择槽文本 DOM

Selecting slot text in Custom Element Shadow DOM

javascript

shadow-dom

custom-element