我正在制作一个自定义元素，并且一直在寻找一种向:host与 shadow DOM 关联的伪类添加更多特异性的方法。根据我的理解，它用于选择实际的自定义元素本身。例如，如果我有一个被调用的元素my-elem附加了一个 shadow DOM，那么:host伪类就相当于my-elem全局样式表中的一个类。
从这个我想尝试，并进一步明确的选择，这样我可以风格在他们的状态自定义元素，例如：:host:not(.active)。但是，我真的找不到任何关于进一步具体的阅读，:host并且使用上述内容不起作用。
我也尝试过传统的:host.active，甚至是厚脸皮的，:host[active]但都没有奏效。
所以我想问一下这是否可能。我已经在网上进行了一些搜索，但网上似乎并没有太多关于此事的信息，我觉得这可能是不可能的，所以我可能不得不降级并将活动类应用于包装器状态更改时的自定义元素。
我只是想这样做，因为它允许我以编程方式从其父元素设置元素的样式（我将活动/非活动样式应用于自定义元素表单的自定义幻灯片）。
先感谢您。
我注意到我的代码有些奇怪。我有一个正则表达式来检查英国邮政编码，它使用捕获组并且工作正常，除非在 if 语句中。要测试的代码位于验证器类中，该验证器类传递一个包含表单中所有字段的 HTML 节点列表。
例如，当我在patternHTML 输入字段的标签内使用它时，它的行为正如您所期望的那样。正如当我console.log(regex.test(field.value)). 然而，当我将它放入 if 语句中时，它似乎每次都会失败。
正则表达式如下：
/\b([a-zA-Z]{1,2}[0-9]{1,2}[a-zA-Z]?){1}( |-)?([0-9]{1,2}[a-zA-Z]{1,2}){1}\b/
输入字段如下：
<input required pattern="\b([a-zA-Z]{1,2}[0-9]{1,2}[a-zA-Z]?){1}( |-)?([0-9]{1,2}[a-zA-Z]{1,2}){1}\b" inputmode="text" class="form-field" type="text" name="postcode" id="contactPostcode" placeholder="Postcode eg NW2 8BZ" />
测试它的代码如下：
validate(fields)
// ... omitted ... //
let errors = [];
const postcodeRegex = /\b([a-zA-Z]{1,2}[0-9]{1,2}[a-zA-Z]?){1}( |-)?([0-9]{1,2}[a-zA-Z]{1,2}){1}\b/;
postcodeRegex.lastIndex = 0;
for (let field of fields) {
if(field.name === 'postcode') {
console.log(postcodeRegex.test(field.value))
if(!postcodeRegex.test(field.value)) {
errors.push({
field: field.getAttribute('name'),
error: 'Illegal character detected'
});
continue;
}
}
}
console.log 检查返回 true，但是 if …