javascript - Selecting slot text in Custom Element Shadow DOM - Stack Overflow

admin管理员组

文章数量:1295729

I made a simple copy-paste ponent with regular html/css/js. I've tried to turn it into a web ponent and can no longer get the copy-paste behaviour to work.

The markup inside the shadow DOM is basically

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

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

I made a simple copy-paste ponent with regular html/css/js. I've tried to turn it into a web ponent and can no longer get the copy-paste behaviour to work.

The markup inside the shadow DOM is basically

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

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

• javascript
• shadow-dom
• custom-element

Share Follow edited May 13, 2018 at 2:40 Intervalia 11k22 gold badges3434 silver badges7070 bronze badges asked May 12, 2018 at 22:40 Ollie WilliamsOllie Williams 2,54444 gold badges2929 silver badges5050 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

In your example, the textToCopy variable refers to the <slot> element, with no text inside.

If you want to get the ditributed node form the light DOM, of the <copy-paste> element, you should use the assignedNodes() method of the <slot> element:

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

PS: note that the contenteditable attribute may not work as you expect in your given example.

本文标签： javascriptSelecting slot text in Custom Element Shadow DOMStack Overflow