为何属性选择器无法隐藏我的自定义元素？

我之前也碰到过类似的坑，咱们从最常见的原因开始逐一排查：

1. 确认min属性加在了正确的元素上 #

这是最容易踩的雷！你说点击minimise-button时添加属性，一定要检查这个属性是不是加到了代表窗口的自定义元素本身，而不是内部的<border-element>或者按钮上。

举个例子：如果你的窗口组件是<window-element>，JS代码应该给这个元素加属性，而不是它的子元素。比如：

// 若按钮在阴影DOM里，找到宿主窗口元素
this.closest('window-element').setAttribute('min', '');
// 若按钮是组件类内部的元素，直接用this.host
this.host.setAttribute('min', '');

怎么验证？打开浏览器F12开发者工具，找到你的窗口组件标签，查看它的属性列表里有没有min属性。如果属性出现在<border-element>上，那肯定不会触发:host[min]的样式——因为:host指向的是组件本身的元素，不是内部子元素。

2. 检查属性名和CSS选择器的匹配度 #

确保JS里设置的属性名和CSS里的完全一致：

• JS里要用setAttribute('min', '')（全小写），不要写成setAttribute('MIN', '')或者data-min之类的变体。
• CSS里的:host[min]会匹配所有带有min属性的宿主元素，不管属性值是什么（只要属性存在就行）。

3. 排查样式特异性被覆盖的情况 #

虽然:host[min]的特异性比基础:host高，但如果有其他样式（比如带!important的规则、更具体的选择器）覆盖了display: none，那也不会生效。

可以临时给:host[min]加个!important测试：

:host[min] { display: none !important; }

如果这样生效了，说明有其他样式在抢优先级，你可以调整选择器的特异性，比如给窗口组件加个类，用:host.window-component[min]这样更具体的写法。

4. 确认样式加载到了正确的上下文 #

如果你的Web组件用了阴影DOM，一定要确保样式是加载到阴影DOM内部的：

• 要么通过组件类代码把样式表注入到阴影DOM（比如用<link>标签添加到shadowRoot里）
• 要么用adoptedStylesheets API挂载样式

如果样式放在外部文档中，而组件用的是封闭的阴影DOM，外部的:host选择器无法穿透阴影DOM，这时候必须把样式放到阴影DOM内部。

举个正确的组件类写法示例：

class WindowElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    
    // 把样式加载到阴影DOM
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = 'js/components/WindowElement/window-template.css';
    shadow.appendChild(styleLink);
    
    // 构建内部DOM结构
    const borderElement = document.createElement('border-element');
    // ... 添加title-bar、按钮等内部元素 ...
    shadow.appendChild(borderElement);
  }
}
customElements.define('window-element', WindowElement);

如果你的组件没有使用阴影DOM，:host选择器是无效的，这时候应该直接用元素选择器：

window-element[min] { display: none; }

内容的提问来源于stack exchange，提问作者Dominus