在 Shadow DOM 中创建单选按钮

Question

当我们要使用 Shadow Dom 创建一个 自定义单选按钮 作为 Web 组件时，问题就出现了。

通常当我们使用单选按钮时，我们通常给分组的单选框起相同的名称，像这样。

<input type="radio" name="size" id="small" value="small">
<input type="radio" name="size" id="large" value="large">

但是如果我们定义一些自定义元素（比如我们说 cus-radio）-> 我们会以将名称和 id 作为输入（来自父级）并将它们放置在自定义元素中的方式来做。这将在正常情况下完美运行。

但我的问题在于影子 dom！当我们在 shadow dom 中创建元素时，它内部的属性可以访问或与外部 dom（主 dom）连接。那么，如果它的 name 和 id 属性在父 dom 中不可访问或不常见，我们如何开发自定义单选按钮？

例子：-

我们将像这样开发我们的自定义元素（角度元素中的伪代码）

radio.html:-

<input type="radio" [name]="name" [id]="id" ...>

TS/逻辑文件：-

...
component cus-radio {
@Input() name: string;
@Input() id: string;
...

无论我们在哪里使用它：-

<cus-radio [id]="'small'" [name]="'size'" value="small">
<cus-radio [id]="'large'" [name]="'size'" value="large">

预期的行为应该是（就像在正常 dom 中发生的那样），这两个无线电输入必须相互关联并存在于两个相互理解的情况下不。因为那些 name 和 id 在没有引用父 dom（主 dom）的影子 dom 中被更改。

我们如何才能在 shadow dom 中实际创建无线电输入？

Answer 1

在 Shadow DOM 模板中使用 <slot> 元素。这样您就可以在您的自定义元素中注入 input 并在 parent DOM 和 Shadow DOM 中访问它。

在你的 Shadow DOM 中添加一个 <slot> 元素。如果您有多个插槽并希望将特定元素分配给特定插槽，则此元素可以具有 name 属性。但 未命名 插槽也是一种选择。这意味着自定义元素的每个直接子元素都将放置在未命名的插槽内。

this.shadowRoot.innerHTML = `

    <style>
        ::slotted(input[type="radio"]) {
            /**
             * Styles of the input.
             * The input can also be styled from the parent DOM.
             */
        }
    </style>

    <slot></slot>

`;

现在您的 Shadow DOM 有一个 <slot> 元素，您可以在其中注入 <input> 元素。使用::slotted 伪选择器，您可以设置插槽内的每个元素的样式，甚至可以通过选择::slotted 选择器内的特定元素、类或ID 来指定多种样式。

将您的 <input> 添加为自定义元素中的直接子元素，它将被放置在 Shadow DOM 中。

<cus-radio id="small">
    <input type="radio" name="size" value="small"/>
</cus-radio>

Javascript.info 有一些关于如何在自定义元素中使用槽的优秀文档。我建议你检查一下。