有人可以确认,或指向我提出的匹配主机元素's 2959821 designator with a Template' s <slot>
标签的规则吗?
我非常希望它是一个简单的NAME匹配过程,无论Light DOM中相应Slots的深度/位置与Shadow DOM相比,但遗憾的是,似乎祖先血统是最重要的因素 . 即使名称匹配,Light DOM中的子插槽也会填充阴影DOM中的孙子插槽 . 它是否正确?
它让我想起了COBOL关于Levels的MOVE CORR规则,但是这个限制肯定是主页作者对Component的Shadow DOM渲染SLOT不合适的深入了解所预示的?
浏览器:Chrome 58.0.3029.96(64位)
This似乎说只要根可以,后代深度就不应该成为一个问题 . 或者我读错了?
例:
<!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>
<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>
1 回答
slotable (具有
slot
属性的元素)只有在它是shadow DOM主机的直接子节点时才会插入到shadow DOM中 .来自specification:
所以孙子们不会匹配 .