gpt4 book ai didi

javascript - 文档片段中自定义元素的初始化

转载 作者:搜寻专家 更新时间:2023-10-31 08:39:01 24 4
gpt4 key购买 nike

考虑这个 HTML 模板,它有两个扁平的 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 属性执行。

最佳答案

我们可以用这个箭头函数初始化模板:

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

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

或者使用在 template 原型(prototype)上定义的方法(我更喜欢这种方式):

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

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

另请注意,无需克隆模板。

关于javascript - 文档片段中自定义元素的初始化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55791168/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com