Как добавить веб-компонент, созданный программным способом?

Question

Я создал класс веб-компонента для расширения div и использовал customElements.define() для его определения:

class Resize_Div extends HTMLDivElement {
  constructor(){
      super();
      this.cpos = [0,0];
      <etc.>
  }
  connectedCallback() {
    console.log( 'connected' );
  }
  <etc.>
}

customElements.define('resize-div', Resize_Div, { extends:'div'} );

Если я тестирую в html, как <div is:'resize-div'> </div>, он работаетотлично.

Теперь я хочу использовать createElement для создания экземпляра программно, используя опции для объявления равным , как задокументировано здесь :

let dv = document.createElement('ul', { is: 'resize-div' })

Инструменты разработчика браузера показывают, что он создан, с externalHTML, как показано ниже:

outerHTML: "<div is="resize-div"></div>"

Как документально подтверждено, "новый элемент [имеет] is атрибут, значением которого является имя тега пользовательского элемента. "

Теперь я устанавливаю id, класс и стиль и присоединяю новый элемент к DOM с помощью:

document.getElementById( parent ).appendChild( dv );

Теперь посмотрим на это еще раз: атрибут is удален и не работает как веб-компонент:

attributes: NamedNodeMap
0: id
1: class
2: style
length: 3

Документы для устаревшихregisterElement здесь показывает пример использования document.body.appendChild( new myTag() ), но он устарел.

Итак, как правильно создать программу для веб-компонентовМматически и приложить его к документу?

(пс.Я работаю над Chromium версии 70.0.3538.67 (официальная сборка), построенной на Ubuntu, работающей на Ubuntu 16.04 (64-bit)

Answer 1

Вы определили расширенный <div>, но пытаетесь создать элемент <ul>.

Если вместо этого создать <div>, он будет работать:

let dv = document.createElement('div', { is: 'resize-div' })

Синтаксис new также работает:

document.body.appendChild( new Resize_Div )

Примечание: при программном создании настраиваемого встроенного элемента атрибут is не добавляется в код HTML , но все равнодействует как пользовательский элемент, и outerHTML вернет HTML с is правильно заполненным , как объяснено в спецификации .