问题标签 [html5-template]

我在 DocumentFragment 内部工作，并试图将 HTML 插入其中。我们知道 DocumentFragment 没有 innerHTML 设置器，所以我尝试在 DocumentFragment 中插入一个临时节点，并在它之后使用insertAdjacentHTML. 然后我会删除临时元素，并留下一个带有我想要的 DOM 的片段。

示例：（错误是故意的）

我可以清楚地看到临时元素有一个 parentNode，那么为什么会出现此错误？

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

这个拼图元素和容器正确渲染，当您手动将它们放入 index.html 轻 dom 时，它们都可以正常工作

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

我在特殊拼图灯光 dom 中看到了一个新拼图，但它不占用插槽，不渲染，并且控制台出现错误：

未捕获的类型错误：无法在 HTMLDocument.createElement (:3:492) at (index):37 处读取新 PuzzlePiece (puzzle-piece.ts:8) 的属性“内容”

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

如果我理解正确，创建 Web 组件的实例可以总结为创建影子根并复制标记，例如从模板到其中：

当然，如果模板在样式标签中包含 css 规则，这些规则也会被复制。因此，我们可以拥有属于 Web 组件内部标记的范围样式。

问题：

1. 当我创建大量同一个 Web 组件的实例时，它是否会对性能产生影响，因为样式只是被复制而不是重用？
2. 有没有办法在同一个 Web 组件的多个实例之间共享样式节点？

是否可以让 DocumentFragments 包含 tr、th 或 td 标签？

如果我这样做：

我得到[table].

如果我这样做：

我得到了[]!!!?!?的输出

如果我这样做：

我得到[p]了??!?!?!??!?!??!

最后，如果我这样做：

我明白[span]了 - td 去哪儿了？？！

我不明白这里的不一致。文档片段是否可能只包含某些元素？我想做的是做类似于上面第二个的事情，然后使用querySelector.

谢谢