如何将 TEMPLATE 元素附加到 Shadow dom？

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

当我尝试将模板附加到影子 DOM 时，它仅显示为“#documentFragment”，并且从不渲染或复制模板中结构的实际元素。

我花了几个小时试图弄清楚。我找到的解决方案是使用：

  • template.firstElementChild.cloneNode(true);

而不是：

  • template.content.cloneNode(true);

然后，只有到那时，一切都会按预期进行。

我的问题是，我做错了什么吗？

const template = document.createElement('template');
const form = document.createElement('form');
const gateway = document.createElement('fieldset');
const legend = document.createElement('legend');
gateway.appendChild(legend);
const username = document.createElement('input');
username.setAttribute('type', 'email');
username.setAttribute('name', 'username');
username.setAttribute('placeholder', '[email protected]');
username.setAttribute('id', 'username');
gateway.appendChild(username);
const button = document.createElement('button');
button.setAttribute('type', 'button');
button.innerHTML = 'Next';
gateway.appendChild(button);
form.appendChild(gateway);
template.appendChild(form);
class UserAccount extends HTMLElement {
  constructor() {
    super();
    const shadowDOM = this.attachShadow({
      mode: 'open'
    });
    const clone = template.firstElementChild.cloneNode(true);
    // This does not work
    // const clone = template.content.cloneNode(true);
    shadowDOM.appendChild(clone);
    shadowDOM.querySelector('legend').innerHTML = this.getAttribute('api');
  }
}
window.customElements.define('user-account', UserAccount);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <!-- <link rel="stylesheet" href="./css/main.css"> -->
  <script src="./js/user-account.js" defer></script>
  <title>Title</title>
</head>

<body>

  <user-account api="/accounts"></user-account>

</body>

</html>

javascript html web-component html-templates
2个回答
5
投票

TEMPLATES
仅当您需要制作多个副本或希望尽可能使用纯 HTML + CSS 时才有意义。

很多Web Components都展示了用法：

const template = document.createElement("template");
template.innerHTML = "Hello World"

然后做：

constructor() {
    super();
    this._shadowRoot = this.attachShadow({ mode: "open" });
    this._shadowRoot.appendChild(template.content.cloneNode(true));
  }

其中，因为模板仅用作单个“父”容器，所以您可以写为：

constructor() {
    super().attachShadow({ mode: "open" }).innerHTML = "Hello World";
  }

注：

super()
返回
this
，
attachShadow()
设置和返回
this.shadowRoot
...免费

两种类型的模板

您可以在 

DOM
中创建 <TEMPLATE>，也可以在 
Memory
中创建 template

内存中的模板

十分之九内存模板可以用其他 HTMLElements 作为容器来完成，
与您的代码的情况一样，其中 

FORM
可以是主容器。不需要 
template
容器。

如果您确实在内存中构建了模板，请了解 

append()
的价值 （经常被误用）
appendChild()

内存中模板非常适合（使用代码）进行（许多）更改

DOM 中的模板

无需尝试在 JavaScript 字符串中填充 HTML 和 CSS，HTML 文档中就有 DOM！
使用 

<TEMPLATE>
HTML 元素。

添加 ShadowDOM 

<slot>
，您将花更少的时间调试 JavaScript，而花更多的时间编写语义 HTML。

DOM 模板非常适合轻松编辑更多静态 HTML/CSS 结构的 HTML 和 CSS（在 IDE 中使用语法突出显示）

这里有两种类型的模板以及您的代码，哪一种对开发人员来说更容易？

const form = document.createElement('form');
const gateway = document.createElement('fieldset');
const legend = document.createElement('legend');
const username = document.createElement('input');
username.setAttribute('type', 'email');
username.setAttribute('name', 'username');
username.setAttribute('placeholder', '[email protected]');
username.setAttribute('id', 'username');
const button = document.createElement('button');
button.setAttribute('type', 'button');
button.innerHTML = 'Next';
gateway.append(legend,username,button);
form.append(gateway);

class Form extends HTMLElement {
  constructor(element) {
    super().attachShadow({mode:'open'}).append(element);
  }
  connectedCallback() {
    this.shadowRoot.querySelector('legend').innerHTML = this.getAttribute('api');
  }
}

window.customElements.define('form-one', class extends Form {
  constructor() {
    super(form)
  }
});
window.customElements.define('form-two', class extends Form {
  constructor() {
    super(document.getElementById("FormTwo").content);
  }
});
<template id="FormTwo">
  <form>
    <fieldset>
      <legend></legend>
      <input type="email" name="username" placeholder="[email protected]" id="username">
      <button type="button">Next</button>
    </fieldset>
  </form>
</template>

<form-one api="/accounts"></form-one>
<form-two api="/accounts"></form-two>

注：

在上面的代码中，

<TEMPLATE>.content
已移动到shadowDOM。

要重用（克隆）

<TEMPLATE>
，代码必须是：

super(document.getElementById("FormTwo").content.cloneNode(true));

为什么你的
template.content
失败了

您的代码失败了，因为

  const template = document.createElement('template');
  const form = document.createElement("form");
  template.appendChild(form);


template
有无内容

TEMPLATE
不是常规 HTMLElement，您必须附加到 
.content

  const template = document.createElement('template');
  const form = document.createElement("form");
  template.content.appendChild(form);

会工作

大多数 Web 组件示例显示：

  const template = document.createElement("template");
  template.innerHTML = "Hello World"


innerHTML
设置 
.content
在引擎盖下

这解释了为什么而不是：

template.content.appendChild(form);

你可以写：

template.innerHTML = form.outerHTML;

1
投票

“模板”元素是一种特殊元素，实际上不会立即渲染（reference）。这就是为什么附加模板不会产生任何结果。

template.firstElementChild.cloneNode
表示“获取模板的子级（即表单）并克隆它”，这与仅附加表单相同，可以工作（如下）。

const template = document.createElement('template');
const form = document.createElement('form');
const gateway = document.createElement('fieldset');
const legend = document.createElement('legend');
gateway.appendChild(legend);
const username = document.createElement('input');
username.setAttribute('type', 'email');
username.setAttribute('name', 'username');
username.setAttribute('placeholder', '[email protected]');
username.setAttribute('id', 'username');
gateway.appendChild(username);
const button = document.createElement('button');
button.setAttribute('type', 'button');
button.innerHTML = 'Next';
gateway.appendChild(button);
form.appendChild(gateway);
template.appendChild(form);
class UserAccount extends HTMLElement {
  constructor() {
    super();
    const shadowDOM = this.attachShadow({
      mode: 'open'
    });
    shadowDOM.appendChild(form);
    shadowDOM.querySelector('legend').innerHTML = this.getAttribute('api');
  }
}

window.customElements.define('user-account', UserAccount);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <!-- <link rel="stylesheet" href="./css/main.css"> -->
  <script src="./js/user-account.js" defer></script>
  <title>Title</title>
</head>

<body>

  <user-account api="/accounts"></user-account>

</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.