Инициализация пользовательских элементов внутри фрагмента документа - PullRequest
Новая
       44

Инициализация пользовательских элементов внутри фрагмента документа

4 голосов
/ 22 апреля 2019

Рассмотрим этот HTML template с двумя плоскими x-element с и одним вложенным. 

<template id="fooTemplate">
  <x-element>Enter your text node here.</x-element>
  <x-element>
    <x-element>Hello, World?</x-element>
  </x-element>
</template>

Как инициализировать (с помощью конструктора огня) все пользовательские элементы в клонированном фрагменте документа fooTemplate, не добавляя его в DOM, ни путем расширения встроенных элементов с помощью is="x-element"; либо весь фрагмент. 

class XElement extends HTMLElement {
  constructor() { super(); }
  foo() { console.log( this ); }
} customElements.define( 'x-element', XElement );

const uselessf = function( temp ) {
  const frag = window[ temp ].content.cloneNode( true );

  /* Your magic code goes here:
  */ do_black_magic( frag );

  for (const e of  frag.querySelectorAll('x-element') )
    e.foo(); // This should work.

  return frag;
};

window['someNode'].appendChild( uselessf('fooTemplate') );

Обратите внимание, что скрипт выполняется с атрибутом defer.

1 Ответ

2 голосов
/ 22 апреля 2019

Мы можем инициализировать шаблон с помощью этой функции стрелки: 

const initTemplate = temp =>
  document.createRange().createContextualFragment( temp.innerHTML );

const frag = initTemplate( window['someTemplate'] );

Или с помощью этого метода, определенного на template прототипе (я предпочитаю этот способ): 

Object.defineProperty(HTMLTemplateElement.prototype, 'initialise', {
  enumerable: false,
  value() {
    return document.createRange().createContextualFragment( this.innerHTML );
  }
});

const frag = window['someTemplate'].initialise();

В любом случае в результате этот код будет работать нормально: 

for (const elem of  frag.querySelectorAll('x-element') )
  elem.foo();

window['someNode'].appendChild( frag );

Я не уверен, являются ли эти методы наиболее эффективным способом инициализации пользовательских элементов в шаблоне.

Также обратите внимание, что нет необходимости в клонировании шаблона.

...