Javascript HTML模板牛犊上的槽和乳头
是否有人可以确认或向我指出将宿主元素的“slot=”指示符与模板的Javascript HTML模板牛犊上的槽和乳头,javascript,html,web-component,shadow-dom,slot,Javascript,Html,Web Component,Shadow Dom,Slot,是否有人可以确认或向我指出将宿主元素的“slot=”指示符与模板的标记相匹配的规则的建议文档 我非常希望这是一个简单的名称匹配过程，而不管光DOM和阴影DOM中对应插槽的深度/位置如何，但遗憾的是，祖先血统似乎是一个压倒一切的因素。即使名称匹配，灯光DOM中的子插槽也不会填充阴影DOM中的孙子插槽。这是正确的吗 这让我想起了COBOL关于级别的MOVE-CORR规则，但肯定这个限制前提是主页作者非常了解组件的阴影DOM渲染槽不适合使用 浏览器：Chrome 58.0.3029.96（64位） 似
<!DOCTYPE html>
<html>
<head>
<template id="contact-template">
<style>
:host { border: solid 1px #ccc; border-radius: 0.5rem; padding: 0.5rem; margin: 0.5rem; }
b { display: inline-block; width: 5rem; }
</style>
<b>HELLO</b><br/>
<b>Name</b>: <slot name="fullName"><slot name="firstName"></slot> <slot name="lastName"></slot></slot><br>
<b>Email</b>: <slot name="email">Unknown</slot><br>
<b>Address</b>: <slot name="address">Unknown</slot>
<slot></slot>
</template>
<script>
window.addEventListener('DOMContentLoaded', function () {
var contacts = document.getElementById('contacts').children;
var template = document.getElementById('contact-template').content;
alert("Hello"+contacts.length);
document.getElementById("d").attachShadow({mode: 'open'}).appendChild(template.cloneNode(true));
return;
for (var i = 0; i < contacts.length; i++)
contacts[i].attachShadow({mode: 'open'}).appendChild(template.cloneNode(true));
});
</script>
</head>
<body onload="load()">
<p id="demo">Click the button to change the text in this paragraph.</p>
<button onclick="myFunction()">Try it</button>
<div id="contacts">
<div id="d">
<span slot="email">span it</span>
<div name="removeToWork">
<div slot="fullName">Commit Queue</div>
(<a slot="email" href="mailto:commit-queue@webkit.org">commit-queue@webkit.org</a>)<br>
<span slot="address">One Infinite Loop, Cupertino, CA 95014</span>
</div>
</div>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
function load() {
}
</script>
</body>
</html>
：host{边框：实心1px#ccc；边框半径：0.5rem；填充：0.5rem；边距：0.5rem；}
b{显示：内联块；宽度：5rem；}
你好
名称：
电子邮件：未知
地址：不详
addEventListener（'DOMContentLoaded'，函数（）{
var contacts=document.getElementById（'contacts'）.children；
var-template=document.getElementById（'contact-template'）。内容；
警报（“Hello”+contacts.length）；
document.getElementById（“d”）.attachShadow（{mode:'open'}）.appendChild（template.cloneNode（true））；
返回；
对于（变量i=0；i单击按钮更改此段落中的文本
试试看
跨越它
提交队列
（）
加利福尼亚州库珀蒂诺的一个无限环路，邮编95014
函数myFunction（）{
document.getElementById（“demo”）.innerHTML=“Hello World”；
}
函数加载（）{
}
slot<div id="host">
<div slot="s1">Can match</div>
<div slot="s2">Can match</div>
<div>
<div slot="s3">Won't match</div>
</div>
</div>
相配
相配
不匹配