Question

问题：如何从<content></content模板中替换#nameTagTemplate的内容？

问题：目前我的javascript取代了所有模板元素。

HTML

<div class="todo">Hey I'm a todo app</div>
<template id="nameTagTemplate">
    <style>
      .outer {
        border: 2px solid brown;
      }
    </style>
    <div class="outer">
      <div class="boilerplate">
        Hi! My name is
      </div>
      <div class="name">
        <content></content>
      </div>
    </div>
</template>

js文件

var todoEl = document.querySelector('.todo');
var template = document.querySelector('#nameTagTemplate');
var clone = document.importNode(template.content, true);
var root = todoEl.createShadowRoot()
root.appendChild(clone);
root.textContent = 'Shellie'; // this line replaces all nodes in template.
// I would like root.textContent to just replace the content tag elements.

评论：更新仍然无效

// template logic goes here
var todoEl = document.querySelector('.todo');
var template = document.querySelector('#nameTagTemplate');
var clone = document.importNode(template.content, true);
clone.getElementsByTagName("content")[0].textContent='123';
var root = todoEl.createShadowRoot();
root.appendChild(clone);

Answer 1

因此，如果您修改textContent元素的.todo，那么它会按预期工作。

var todoEl = document.querySelector('.todo');
var template = document.querySelector('#nameTagTemplate');
var clone = document.importNode(template.content, true);
var root = todoEl.createShadowRoot();
root.appendChild(clone);
todoEl.textContent = 'Shellie';

＆＃13;

var todoEl = document.querySelector('.todo');
var template = document.querySelector('#nameTagTemplate');
var clone = document.importNode(template.content, true);
var root = todoEl.createShadowRoot();
root.appendChild(clone);
todoEl.textContent = 'Shellie';

＆＃13;

<div class="todo">Hey I'm a todo app</div>
<template id="nameTagTemplate">
  <style>
    .outer {
      border: 2px solid brown;
    }
  </style>
  <div class="outer">
    <div class="boilerplate">
      Hi! My name is
    </div>
    <div class="name">
      <h3><content></content></h3>
    </div>
  </div>
</template>

＆＃13;

在html5rocks article中，这是通过在单击按钮时查询DOM元素来完成的。它还说＆＃34; 插入点樱桃挑选来自影子主机的内容以在那一点出现＆＃34;这意味着影子主机上的内容就是{ {1}}元素。

使用Shadow DOM将内容与演示文稿分开

1 个答案: