Расширение нативного HTML-элемента в Angular 6

Question

Я недавно создал собственный веб-компонент, который хорошо работает во всех браузерах.Я переместил этот веб-компонент в приложение Angular 6, и все работает как положено.Затем я попытался расширить собственный элемент HTML, который снова работал отлично, за исключением случаев, когда я перенес его в свое приложение Angular 6.

Используя примеры из Mozilla, я попытаюсь проиллюстрировать мою проблему.Используя следующее, пытаясь расширить собственный элемент 'p':

// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // count words in element's parent element
    var wcParent = this.parentNode;

    function countWords(node){
      var text = node.innerText || node.textContent
      return text.split(/\s+/g).length;
    }

    var count = 'Words: ' + countWords(wcParent);

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // Create text node and add word count to it
    var text = document.createElement('span');
    text.textContent = count;

    // Append it to the shadow root
    shadow.appendChild(text);


    // Update count when element content changes
    setInterval(function() {
      var count = 'Words: ' + countWords(wcParent);
      text.textContent = count;
    }, 200)

  }
}

// Define the new element
customElements.define('word-count', WordCount, { extends: 'p' });

<p is="word-count">This is some text</p>

Взяв этот же код и поместив его в приложение Angular 6, компонент никогда не запускается.Я помещаю консольные операторы журнала в методы constructor и connectedCallback, и они никогда не срабатывают.Если я удаляю объект {extends: 'p'}, изменяю HTMLParagraphElement extends и делаю его расширением HTMLElement в качестве автономного пользовательского элемента, все работает прекрасно.Я что-то не так делаю или Angular 6 не поддерживает настраиваемое расширение встроенного элемента?

Answer 1

Полагаю, причина в том, что Angular создает эти настраиваемые встроенные элементы при разборе шаблонов компонентов - вероятно, он не знает, как это правильно сделать.Скорее всего, он считает is обычным атрибутом, который можно добавить после создания элемента (а это не так).

Сначала создайте элемент, а затем добавьте is -attribute, к сожалению, не обновит элемент.

См. пример ниже: div#d имеет нерабочий пример этого настроенного input.

customElements.define('my-input', class extends HTMLInputElement {
  connectedCallback() {
    this.value = this.parentNode.id
    this.parentNode.classList.add('connected')
  }
}, {
  extends: 'input'
})

document.addEventListener('DOMContentLoaded', () => {
  b.innerHTML = `<input type="text" is="my-input">`

  let el = document.createElement('input', {
    is: 'my-input'
  })
  el.type = 'text'
  c.appendChild(el)

  // will not work:
  let el2 = document.createElement('input')
  el2.setAttribute('is', 'my-input')
  el2.type = 'text'
  d.appendChild(el2)
})

div {
  border: 3px dotted #999;
  padding: 10px;
}

div::before {
  content: "#"attr(id)" ";
}

.connected {
  background-color: lime;
}

<div id="a"><input type="text" is="my-input"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

Чтобы заставить его работать с Angular, подключитесь к жизненному циклу вашего компонента Angular (например, обратный вызов onInit()) и выберите рабочий путь.создать там свой элемент.