[英]Separate Content from Presentation using Shadow DOM
問題: 如何替換#nameTagTemplate
模板中<content></content
?
問題:目前,我的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);
因此,如果您編輯.todo
元素的textContent
,則它將按預期工作。
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';
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';
<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>
在html5rocks文章中,這是通過在單擊按鈕時查詢DOM元素來完成的。 它還說“ 插入點將影子主機中的內容點選到該點 ,然后顯示 ”,這意味着影子主機上的內容就是<content></content>
元素內部的<content></content>
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.