使用现有CSS选择器将阴影DOM中的样式应用于自定义元素

这个问题可能没有一个直接的答案，但希望能带来一些最佳实践或通用模式，以便在将现有样式框架适应新的web组件开发时使用

就我的情况而言，我有一个组件，它都是通过自包含的样式和功能正确设置的，一切都很好

在某些用例中，应用程序显示需要堆叠化身，只是在对角线上一个稍微高于另一个，我遵循的模式是使用一个简单的组件。所有这一切都是用正确的样式类将开槽内容包装在一个文档中，但关键的方面是保持可组合性，以便灵活地重用，如下所示：

棘手的一点在于样式，这些样式是从monorepo导入的，monorepo向组件库的其他风格（如React、Vue等）提供相同的BEM-ish CSS和组件CSS模块。我导入的头像和复合头像样式很好，但是强制预期的重叠显示是通过层次选择器定义的。my-composite-avatar.my-composite-avatar-medium.my-avatar{}

因此，如果将.my复合avatar类应用于中的div包装器，并将.my avatar类应用于中的包装器及其自身的阴影DOM，那么父/子CSS选择器就不好了

我怀疑这是否有灵丹妙药，但随着越来越多的人在使用现有样式系统的同时迁移到Web组件，这似乎将是一种相当常见的情况。什么样的方法最有意义，以确保复合组件保持可组合性，并且现有选择器的调整不会带来痛苦，或者至少易于与其他开发人员通信？这可以通过：：host或：：slotted解决，还是这些情况需要大量的重新工作

---

感谢阅读，感谢您的想法

我建议与CSS属性成为好朋友 因为它们会随着CSS选择器慢慢进入阴影域

和 如果你想变得残忍，让定制元素改变外部世界。 实例 我有一个从属性或CSS属性获取的配置 使用我最喜欢的代码行：

let val = this.getAttribute(attr) 
           || 
          getComputedStyle(this)
           .getPropertyValue("--svg-icon-" + attr)
           .replace(/"/g, "")
           .trim();

允许您的标准属性配置：

  <svg-icon name="configuration" fill="grey"></svg-icon>

实例 -svg图标互动程序与CSS无关，它由connectedCallback代码读取和解析，为所有名为globe的图标生成svg背景/互动程序

双引号不是必需的，但是如果没有双引号，您的IDE将抱怨无效的CSS

享受编码的乐趣。。。当你从…开始的时候，你会扯一些头发。。。 但是你可以把CSS带到另一个层次

附言 并监控可构造样式表（也称为可构造样式表）或已构造样式表（称为已采用样式表）的未来：

---

IConMester

我建议与CSS属性成为好朋友 因为它们会随着CSS选择器慢慢进入阴影域

和 如果你想变得残忍，让定制元素改变外部世界。 实例 我有一个从属性或CSS属性获取的配置 使用我最喜欢的代码行：

let val = this.getAttribute(attr) 
           || 
          getComputedStyle(this)
           .getPropertyValue("--svg-icon-" + attr)
           .replace(/"/g, "")
           .trim();

允许您的标准属性配置：

  <svg-icon name="configuration" fill="grey"></svg-icon>

实例 -svg图标互动程序与CSS无关，它由connectedCallback代码读取和解析，为所有名为globe的图标生成svg背景/互动程序

双引号不是必需的，但是如果没有双引号，您的IDE将抱怨无效的CSS

享受编码的乐趣。。。当你从…开始的时候，你会扯一些头发。。。 但是你可以把CSS带到另一个层次

附言 并监控可构造样式表（也称为可构造样式表）或已构造样式表（称为已采用样式表）的未来：

---

IConMister

太棒了，感谢Danny提供全面的解决方案。最重要的是，要使我们的基于Web组件的UI工具包成为最好的，我们必须重新想象如何将样式烘焙到组件中，而不是仅仅尝试使用我们已经拥有的大型BEM ish/SMACC样式。完全改变了任务的范围。当我们开始我们的新方法时，像这样的新策略将非常强大。添加了一个非常重要的PS。在Chromium浏览器中受支持。苹果就是苹果。IMHO BEM和WebComponents就像把一匹马放在TESLAIntersting方法前面一样，尽管我相信未来是可构建的样式表，正如你在回答的第二部分所说的。现在我正在使用litelement，并且有类似export-const-myCss的结构，这些结构将被导入并在模块中使用。这对于可构造性应该更为有效。和动态的重要性这是一个可怕的设计模式。谢谢你的推荐。我修改了我的代码，它成功了！太棒了，谢谢Danny提供的全面解决方案。最重要的是，要使我们的基于Web组件的UI工具包成为最好的，我们需要rei

---

想象一下如何将样式烘焙到组件中，而不仅仅是尝试使用我们已经拥有的大型BEM ish/SMACCS样式。完全改变了任务的范围。当我们开始我们的新方法时，像这样的新策略将非常强大。添加了一个非常重要的PS。在Chromium浏览器中受支持。苹果就是苹果。IMHO BEM和WebComponents就像把一匹马放在TESLAIntersting方法前面一样，尽管我相信未来是可构建的样式表，正如你在回答的第二部分所说的。现在我正在使用litelement，并且有类似export-const-myCss的结构，这些结构将被导入并在模块中使用。这对于可构造性应该更为有效。和动态的重要性这是一个可怕的设计模式。谢谢你的推荐。我修改了我的代码，它成功了！