есть конструктор при использовании document.register

Question

Я экспериментировал с document.register, с помощью которого я создаю пользовательский элемент следующим образом:

var XFoo = document.register('x-foo', { 
    prototype: Object.create(HTMLElement.prototype, { 
     bar: { 
     get: function() { return 5; } 
     }, 
     foo: { 
     value: function() { 
      alert('foo() called'); 
     } 
     } 
    }) 
    }); 

Теперь мне было интересно, если это возможно, чтобы определить конструктор функция, которая вызывается при создании элемента x-foo?

В моем случае я хочу, чтобы добавить некоторые дочерние элементы и некоторые классы, так что если вы определяете что-то вроде

<x-foo></x-foo> 

Я хочу добавить Div

<x-foo class="bar foo"> 
    <div class="x-foo__child"/> 
</x-foo> 

Answer 1

см lifecycle callback methods:

var XFooProto = Object.create(HTMLElement.prototype); 
XFooProto.createdCallback = function() { 
    //do instantiation stuff 

    this.classList.add('foo'); 
    this.classList.add('bar'); 

    var child = document.createElement('div'); 
    child.classList.add('x-foo__child'); 
    this.appendChild(child); 

    // for testing 
    child.textContent = 'hello'; 
}; 

var XFoo = document.register('x-foo', { prototype: XFooProto }); 

Demo

Я удалил лишние определенные свойства объекта-прототипа, чтобы сделать ответ короче, поскольку они не связаны с представленным вопросом, не стесняйтесь добавлять их снова как второй аргумент в Object.create.

Вы можете удалить часть var XFoo =, если вы не собираетесь использовать ее в качестве конструктора (new XFoo()) в своем коде. Вы также можете использовать document.createElement('x-foo') для того же результата, если вы хотите программно создать новый XFoos.