html5 模板标签：内容访问的后备答案

【问题标题】：html5 template tag: fallback for content accesshtml5 模板标签：内容访问的后备
【发布时间】：2023-04-05 13:46:01
【问题描述】：

我在 webkit 浏览器 (JavaFX WebView 2.2) 中使用模板标签来存储我可以克隆并附加到文档主要部分的元素。

但是，我无法使用 templateElement.content（HTML5 标准）访问其内容。相反，我使用 jQuery 通过选择器“#templateElement div”获取模板 TAG 中的元素。

似乎还没有完全支持模板标签（内部脚本也运行），尽管它的内容没有呈现。

我担心的是，当模板标签被支持时，获取其内容的方式会中断，我的页面将停止工作。

无论未来的实现发生变化，获取模板内容的推荐方法是什么？

HTML：

<template id="templateElement">
    <div>Clone Me!</div>
</template>

JavaScript：

function getContentsCurrent() {
    var toBeCloned = $("#templateElement div")[0];
    //append where needed...
}

function getContentsFuture() {
    var toBeCloned = templateElement.content.getElementsByTagName("div")[0];
    //append where needed...
}

编辑

我认为 jQuery 将无法自动处理这个问题，即使在未来也是如此，因为模板“innerHTML”被故意路由到 content 以便 DOM 无法访问它（所以没有选择器不小心碰到了它）。

【问题讨论】：

Eduardo，你能创建一个小提琴来重现这个问题吗？我很乐意提供帮助，但我懒得从头开始这样做:)
好吧，问题还没有发生。我可以使用 getContentsCurrent() 获取模板中的 div。但是，在 JavaFX 的未来版本中，当根据 HTML5 规范实现模板时，代码可能会中断，因为我认为模板的 innerHTML 只能使用模板元素的 content 属性访问。然后，有必要使用 getContentsFuture()。是否可以在小提琴中降级浏览器以测试回退？
Eduardo，您正在尝试解决一个尚不存在的问题。我认为最好为问题做好准备：让给定的东西尽可能原子化，所以如果将来真的出现问题，你可以改变它。同时，如果可能，请提前注册新闻通讯以了解变更的性质；）
是的，我想在它发生之前解决它。问题出现后改变并不难，但在我太忙的时候可能会发生。用户在页面上突然中断是不好的，即使是几天。我想要一些能够同时工作的代码，现在和将来。选择的答案让我想到了后备的一般解决方案，它们似乎比我在提出问题之前更简单！

标签： html fallback javafx-webengine html5-template

【解决方案1】：

您可以测试之前是否存在content 功能：

function getContents() {
  var toBeCloned;
  if ( templateElement.content )
    toBeCloned = templateElement.content.getElementsByTagName("div")[0];
  else
    toBeCloned = templateElement.querySelector("div");
  //append where needed...
}

另一种方式：

var content = templateElement.content || templateElement
var toBeCloned = content.querySelector( "div" )
//...

【讨论】：

确实，这是一般的后备解决方案。很高兴在 SO 上提问时学到很多其他东西！