0

我有关于 webfundamentals 实现的各种问题，我读过一个真正的 web 组件必须具有用于 css 封装的 shadowDOM，用于我真正喜欢的组件逻辑的 customElements，以及 HTML Temapltes 和导入，所以我试图做到这一切一个 customElement 组件，我遇到了很多我觉得很难调试的问题，我会全部列出来。

  1. 我是否必须将 html 模板插入到文档中才能真正得到它？我不能只从 js 获取它的内容吗？如果我必须，当我打算替换 shadowHost 内容时它是如何工作的，我的意思是我在 shadowRoot 中得到了模板（链接），我的实际问题是当我做querySelector(链接 [rel="import"]).import.querySelector("template")它在 .import 函数标记之后为空，当我将该函数插入文档时，它实际上获取了模板内容，这是文档。

在此处输入图像描述

看那个截图我还有2个问题

  1. 我应该shadowHost.innerHTML = file.querySelector(link[rel="import"]).import.querySelector("template") 使用标签并将其内容复制到 shadowRoot 元素中吗？我的意思是我该如何实施这种方法？我使用 Angular 作为第一个示例，他们使用一个 HTML 文件（我猜测它是一个模板或插槽标签），然后他们将它作为构造函数的参数添加到组件中，所以如何使用 HTMLTemplates 和 HTMLImport 我可以实现该行为，我已使用记录的功能，但在最后阶段不起作用。

  2. 我应该保留<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>

4

1 回答 1

0

我读过一个真正的 Web 组件必须具有用于 css 封装的 shadowDOM，用于我真正喜欢的组件逻辑的 customElements，以及 HTML Temapltes 和导入

您所阅读的内容已经过时了：

  1. HTML 导入已被弃用，因此您应该使用另一种方法来加载模板。
  2. 由于#1，HTML 模板（又名<template>元素）经常被替换为 par 模板文字。

模板文字可以在 Javascript 中定义。通过这种方式，它们可以在经典的 Javascript 文件或 ES6 模块中定义。

顺便说一句，如果您仍想使用 HTML Imports (not recommanded) ，则需要使用 polyfill。

<link rel="import">应该放在<head>主文档的元素中，而不是在 Shadow DOM 中。

如果你想使用<template>你不需要将它附加到主文档中。

var template = document.createElement( 'template' )
template.innerHTML = `
    <h1>Title</h1>
    <div>Content</div>
`
...
this.shadowRoot.appendChild( template.content.clone( true ) )
于 2019-02-28T18:41:53.630 回答