在 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 中发生的那样），这两个无线电输入必须相互关联并存在于两个相互理解中，就像一个被检查了另一个必须取消检查等。但在 shadow dom 中它没有。因为那些 name 和 id 在没有引用父 dom（主 dom）的 shadow dom 中发生了变化。

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

Answer 1

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

在 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伪选择器，您可以设置插槽内每个元素的样式，甚至可以通过选择选择器内的特定元素、类或 id 来指定多种样式::slotted。

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

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

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