Выбор текста слота в пользовательском элементе Shadow DOM - PullRequest
Новая
       8

Выбор текста слота в пользовательском элементе Shadow DOM

0 голосов
/ 13 мая 2018

Я сделал простой компонент copy-paste с обычным 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);

1 Ответ

0 голосов
/ 14 мая 2018

В вашем примере переменная textToCopy относится к элементу <slot> без текста внутри.

Если вы хотите получить распределенный узел из легкого DOM элемента <copy-paste>, вам следует использовать метод assignedNodes() элемента <slot>: 

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

PS: обратите внимание, что атрибут contenteditable может работать не так, как вы ожидаете в данном примере.

...