WebFundamentals，带有shadowDOM的CustomElement和带HTML导入的HTML模板

Question

我有关于webfundamentals实现的各种问题，我已经读过一个真正的Web组件必须有用于css封装的shadowDOM，用于我真正喜欢的组件逻辑的customElements，以及HTML Temapltes和import，所以我试图在一个customElement组件，我遇到了许多我发现很难调试的问题，我将全部征集它们。

我是否必须在文档中插入html模板才能真正获得它？我不能只从js获取其内容？如果我不得不，当我打算更换shadowHost内容时它是否有效，我的意思是我得到了shadowRoot中的模板（链接），我的实际问题是当我做querySelector(link [rel =“import”] ).import.querySelector("template")在.import函数标记之后为null，当我将该函数插入到文档中时，它实际上获取了模板内容，继承了doc。

看着这个截图我还有2个问题

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

我已经尝试了几天做一个简单的自定义元素与阴影DOM完全正常，问题是当我尝试添加外部使其更健壮。

有帮助吗？建议？我可以展示我在组件上使用的一些功能，以便有一个想法。

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>

Answer 1

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

你读过的内容已经过时了：

不推荐使用HTML Imports，因此您应该使用其他方法来加载模板。
由于＃1，HTML模板（又名<template>元素）经常被替换为par模板文字。

模板文字可以在Javascript中定义。这样，它们可以在经典Javascript文件或ES6模块中定义。

顺便说一下，如果您仍想使用HTML Imports（不推荐），则需要使用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 ) )

WebFundamentals，带有shadowDOM的CustomElement和带HTML导入的HTML模板

问题描述投票：0回答：1

1个回答

最新问题

WebFundamentals，带有shadowDOM的CustomElement和带HTML导入的HTML模板

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1