香草网状组件结构

Question

香草网状组件结构

Ben*_*mas 3 javascript web-component html5-template custom-element html5-import

我正在研究构建香草网络组件.我以前使用过Polymer,你可以将模板,样式和JavaScript放在一个文件中.如果可能的话,我希望用'vanilla'网页组件实现这一目标,但无法解决问题.我从这里获取代码并将其添加到我正在使用的文件中,如下所示:

<!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>

Run Code Online (Sandbox Code Playgroud)

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

有没有办法实现这个目标？我个人更喜欢这种方法在JavaScript中使用创建HTML document.createElement.

Answer 1

Sup*_*arp 5

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

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

Run Code Online (Sandbox Code Playgroud)

然后,使用或者导入自定义元素的模板(或在其阴影DOM)importNode()或cloneNode().

形成的ownerDocument财产currentScript

解析脚本时,全局值document.currentScript引用要解析的脚本,因此其属性ownerDocument是对拥有该脚本的文档的引用.你可以querySelector对它进行调用:

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

Run Code Online (Sandbox Code Playgroud)

注意:该currentScript值是临时设置的,因此它在后续调用中不再起作用,例如connectedCallback()或attachedCallback(),因此您必须在解析时将其记忆在持久变量中,以便在以后需要时重用它.

归档时间：	9 年，2 月前
查看次数：	520 次
最近记录：	9 年，2 月前