【发布时间】：2019-02-28 04:50:19
【问题描述】：
我对 webfundamentals 实现有各种疑问，我读过一个真正的 web 组件必须具有用于 css 封装的 shadowDOM，用于我真正喜欢的组件逻辑的 customElements，以及 HTML Temapltes 和导入，所以我正在尝试做这一切都在一个 customElement 组件中，我遇到了很多我觉得很难调试的问题，我会全部列出来。
- 我是否必须将 html 模板插入到文档中才能真正得到它？我不能只从 js 获取它的内容吗？如果我不得不，当我打算替换 shadowHost 内容时它是如何工作的，我的意思是我在 shadowRoot 中得到了模板（链接），我的实际问题是当我这样做时
querySelector(link[rel=" import"]).import.querySelector("template")在 .import 函数标记之后为空，当我将该函数插入文档时，它实际上获取了模板内容，这是文档。
看了那张截图，我还有 2 个问题
我应该使用
shadowHost.innerHTML = file.querySelector(link[rel="import"]).import.querySelector("template")使用标签并将其内容复制到 shadowRoot 元素中？我的意思是我该如何实施这种方法？我使用 Angular 作为第一个例子，他们使用一个 HTML 文件（我猜测它是一个模板或插槽标签），然后他们将它作为构造函数的参数添加到组件中，所以如何使用 HTMLTemplates 和 HTMLImport 我可以实现该行为，我已使用记录的功能，但在最后阶段不起作用。我应该将
<link rel="import">保留在 shadowRoot 内还是 document.head 内？我可以实现模板而不需要将其添加到文档中吗？
我几天来一直在尝试用 shadowDOM 做一个简单的 customElement，它工作得很好，问题是当我尝试添加一个外部以使其更健壮时。
有什么帮助吗？建议？我可以展示一些我在组件上使用的功能以产生想法。
class EgHeader extends HTMLElement {
constructor() {
super();
this.shadowHost = shadowHost.bind(this);
this.shadowStyle = shadowStyle.bind(this);
this.shadowTemplate = shadowTemplate.bind(this);
this.host = this.shadowHost();
}
connectedCallback() {
this.defaultProperties();
let importSelector = this.host.querySelector(`link[rel="import"]`);
console.log(importSelector);
// this.host.appendChild(importSelector.cloneNode(true));
this.host.innerHTML = importSelector.import.querySelector(
"template"
).content;
}
defaultProperties() {
this.getAttributeNames().forEach(key => {
console.log(key);
if (key === "css") {
return this.shadowStyle(this.getAttribute(key));
}
if (key === "template") {
return this.shadowTemplate(this.getAttribute(key));
}
});
}
}
customElements.define("eg-header", EgHeader);
function shadowHost() {
let root = this.attachShadow({
mode: "open"
});
return root;
}
function shadowStyle(stylesheet) {
let link = document.createElement("link");
link.rel = "stylesheet";
link.href = stylesheet + ".css";
this.host.appendChild(link.cloneNode(true));
return link;
}
function shadowTemplate(link) {
var template = document.createElement("link");
template.rel = "import";
template.id = `${link}-template`;
template.href = link + ".html";
document.head.appendChild(template);
this.host.appendChild(template);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="./Header.js"></script>
<script src="./index.js"></script>
</head>
<body>
<eg-header css="./Header" template="./Header">
</eg-header>
</body>
</html>
// Separated file called Header.html
<template>
<nav>This is X element</nav>
<script>
console.warn("Executed when the template is activated.");
</script>
</template>【问题讨论】：
-
它也这么说
HTML element <link> is ignored in shadow tree. -
也尝试了
var clone = document.importNode(t.content, true);，实际上是最糟糕的
标签： web-component shadow-dom custom-element html-imports html-templates