自定义元素中断模板上的createElement-Java 学习之路

我正在创建两个自定义元素，使用link rel =“import”将它们添加到index.html . 一个是带插槽的容器，另一个是插槽中的数字 . 这两个元素都有一个带有模板的HTML文件和一个指向js文件的链接，该文件将它们定义为自定义元素 . 要将自定义元素类声明链接到我正在使用的HTML模板：

class PuzzlePiece extends HTMLElement{

constructor(){
    super();
    console.dir(document.currentScript);
    const t = document.currentScript.ownerDocument.getElementById('piece-puzzle');
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.appendChild(t.content.cloneNode(true));
 }

这个拼图元素和容器正确呈现，当你手动将它们放在index.html light dom中时它都可以正常工作

<special-puzzle id="grid">
    <puzzle-piece id="hello"></puzzle-piece>
 </special-puzzle>

但是，一旦我尝试在index.html中使用JS创建和附加拼图：

<script>
    const addToGrid = document.createElement("puzzle-piece");
    document.getElementById("grid").appendChild(addToGrid);
</script>

我在特殊拼图灯dom中看到一个新的拼图，但它没有占用一个插槽，没有渲染，并且控制台有错误：

Uncaught TypeError：无法在HTMLDocument.createElement（：3：492）at（index）处新的PuzzlePiece（puzzle-piece.ts：8）读取null的属性'content'：37

据我所知，问题是当使用document.createElement时，浏览器会进入类定义，但document.currentScript.ownerDocument与仅手动使用HTML标记时不同 . 我相信因此，组件找不到它的模板 . 这是我的第一个Stack Overflow问题，所以任何反馈/帮助都将不胜感激！

1 回答

感谢真棒的@Supersharp和他们的Stack Overflow post

基本上，为了保留正确的document.currentScript.ownerDocument，我需要在类之前在var中声明它，然后在类中使用该var .

旧：

class PuzzlePiece extends HTMLElement{
constructor(){
super();
const t = document.currentScript.ownerDocument.getElementById('piece-puzzle');
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(t.content.cloneNode(true));}

新：

var importedDoc = document.currentScript.ownerDocument;
class PuzzlePiece extends HTMLElement{
constructor(){
super();
const t = importedDoc.getElementById('piece-puzzle');
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(t.content.cloneNode(true));}

回复于 2024-04-30T02:25:46+08:00

自定义元素中断模板上的createElement

1 回答

相关问题