Question

我用常规的html / css / js制作了一个简单的复制粘贴组件。我试图将它变成一个Web组件，并且无法再使复制粘贴行为起作用。

shadow 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>元素，内部没有文本。

如果您希望将ditributed节点形成<copy-paste>元素的轻型DOM，则应使用<slot>元素的assignedNodes()方法：

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

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

在自定义元素阴影DOM

1 个答案: