香草式web组件结构

Question

我正在寻找构造香草的网页组件。我以前使用过聚合物，喜欢的事实是，您可以在一个文件中的模板，样式和JavaScript为您的组件。如果可能的话，我想用“香草”的网页组件来实现这一点，但无法解决。我从这里获取了代码，并将其添加到我正在使用的文件中，如下所示：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Component test</title>
    
    <link rel="import" href="x-foo-from-template.html">
  </head>
  <body>
    <x-foo-from-template></x-foo-from-template>
  </body>
</html>

这会失败，因为当我们尝试选择模板时，它并不存在，因为此时模板不在DOM中(对吗？)

有办法做到这一点吗？我个人更喜欢这种方法，而不是使用JavaScript使用document.createElement创建HTML。

Answer 1

从导入的文档中获取模板的主要方法有两种：

1.来自import <link> 元素的属性

<link rel=import>元素拥有一个包含导入文档的import属性。您可以对其执行querySelector调用以获取<template>

var doc = document.querySelector( 'link[href$="x-foo-from-template.html"]').import
var template = doc.querySelector( 'template' )

然后使用importNode()或cloneNode()在自定义元素(或其影子DOM)中导入模板。

来自ownerDocument currentScript的属性的2。

解析脚本时，全局值document.currentScript引用正在解析的脚本，因此它的属性ownerDocument是对拥有脚本的文档的引用。您可以对其执行querySelector调用：

var template = document.currentScript.ownerDocument.querySelector( 'template' )

注意:将temporarily，值设置为currentScript，因此在后续调用(如connectedCallback()或attachedCallback() )中不再工作，因此您必须在解析时将其存储在持久变量中，以便在以后需要时重用它。

Answer 2

对于后来者：

截至2021年，HTML特性已不再受欢迎(MDN链路)。

我不推荐它，您可以相反:创建一个带有html导入的数据属性的模板标记。编写一个运行在所有具有该属性的元素上的脚本，并使用脚本中的fetch()访问那些html部件，将获取的导入添加到模板标记中，并使用它(例如：template.content.cloneNode( true ) )。