元素携带动态额外类名时浏览器忽略ID选择器CSS样式如何解决

#myID规则不生效是CSS优先级计算规则导致的：

• CSS优先级判定顺序为：!important声明 > 行内样式 > ID选择器数量 > 类/属性/伪类选择器数量 > 标签/伪元素选择器数量。高维度优先级判定不受低维度选择器数量影响，同维度下才会对比下一级选择器的数量。
• 你的#myID选择器优先级构成为1个ID选择器、0个类选择器；外部的#myID.xy.za选择器构成为1个ID选择器、2个类选择器。两者ID选择器数量相同，外部规则的类选择器数量更多，优先级更高，即使你的规则加了!important，只要外部规则同样带!important，或者优先级相同的情况下外部规则加载顺序更靠后，你的样式就会被覆盖。
• 由于.xy、.za是随机生成的动态类名，无法提前枚举匹配，可使用以下不需要匹配动态类的解决方案：

• 重复ID选择器提升优先级
  同一个选择器中重复书写两次ID，优先级会变为2个ID选择器，直接超过外部规则的1个ID优先级，无论对方拼接多少个类选择器都无法反超，兼容所有主流浏览器，不需要修改DOM或JS：

  #myID#myID {
    目标属性: 属性值 !important;
  }
  

  注意：该写法完全符合W3C CSS标准，不属于hack写法，所有现代浏览器及IE8及以上版本都支持
• 直接添加行内样式
  行内样式的优先级高于所有样式表中的选择器规则，直接给目标元素添加style属性即可。如果要确保压过所有带!important的样式表规则，也可以在行内样式中追加!important：

  <div id="myID" class="xy za" style="目标属性: 属性值 !important;">...</div>
  

• JS注入高优先级行内样式
  如果不方便直接修改DOM模板，可等外部组件加载完成后，通过setProperty方法给元素设置带important优先级的样式，效果和直接书写行内样式一致：

  const targetEl = document.getElementById('myID');
  // 入参依次为：CSS属性名、属性值、优先级
  targetEl.style.setProperty('目标属性', '属性值', 'important');
  

• Shadow DOM样式隔离
  如果目标元素是可控的自有DOM，可将其挂载到独立的Shadow Root下，外部组件的所有样式都无法穿透到Shadow DOM内部，自有样式也不会泄露到外部，从根源上避免样式优先级冲突。

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