公牛上的 HTML 模板插槽和奶嘴答案

【问题标题】：HTML Templates Slots and Teats on a bull公牛上的 HTML 模板插槽和奶嘴
【发布时间】：2017-10-16 10:22:54
【问题描述】：

有人可以确认或指出建议的文档，用于将主机元素的“插槽=”指示符与模板的 <slot> 标记匹配的规则吗？

我非常希望这是一个简单的名称匹配过程，无论 Light DOM 与 Shadow DOM 中相应插槽的深度/位置如何，但遗憾的是，祖先血统似乎是一个压倒一切的因素。 IOW 即使名称匹配，Light DOM 中的子槽也将填充影子 DOM 中的孙槽。这是正确的吗？

这让我想起了 COBOL 关于关卡的 MOVE CORR 规则，但这个限制肯定是以主页作者对组件的 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><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>

【问题讨论】：

标签： javascript html web-component shadow-dom slot

【解决方案1】：

slotable（具有slot 属性的元素）仅当它是shadow DOM 宿主的直接子元素时才会插入到shadow DOM 中。

来自specification：

对于每个可插槽主机的子节点，可插槽，按树形顺序运行以下子步骤：

所以孙子不会匹配。

<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>

【讨论】：

是的，我希望“树顺序”包括递归。尽管如此，这个例子肯定与你所说的和我的个人经验相矛盾：-developer.mozilla.org/en-US/docs/Web/HTML/Element/slot summary/detail 元素不是真正的节点/子节点？
不要混淆slot元素和slotable元素：直接子约束是指slotable。插槽可以是影子树中的孙子。
你这个笨蛋！谢了哥们。更有意义。