在文档片段内初始化自定义元素

Question

考虑这个HTML template有两个平坦的x-elements和一个嵌套。

<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属性执行。

Answer 1

我们可以使用此箭头函数初始化模板：

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 );

---

我不确定这些方法是否是在模板中初始化自定义元素的最有效方法。

另请注意，不需要克隆模板。