让模板与容器查询兼容

我想重构一些组件模板,以更好地支持容器查询。我还需要添加一些额外的包装器,因为我无法查询容器本身。但如果我这样做,我想知道如何最好地命名包装元素。看看我的模板,我通常的命名方式是将 wrapper 元素作为外层,将 container 作为内层。

.component {
  &__wrapper {
  }
  &__container {
  }
}

这似乎很有意义。但对于容器查询,我总是需要将外层元素声明为容器。如果包装器被声明为容器,那将不太直观。这看起来要好得多:

image

所以我想知道是否有人已经考虑过这里的约定或好的方法?也许我想多了 :thinking: 但如果我重构模板,这是一个破坏性更改,所以我不想随意进行。

1 个赞