Vue：通过 CSS 选择组件的最简洁方法是什么？

我有一个bar成分。它的使用方式如下：

<template>
  <div>
    <!-- stuff -->
    <bar></bar>
    <!-- stuff -->
    <!-- stuff -->
    <!-- stuff -->
    <bar></bar>
    <!-- stuff -->
    <bar></bar>
    <!-- stuff -->  
  </div>
</template>

<style lang="scss" scoped>
  @media (max-width: 1300px) {
    // this selector doesn't work, but it would be nice if it did
    bar {
      display: none;
    }
  }
</style>

我想在屏幕为 1300px 或更窄时隐藏栏元素。如果有一个就好了bar元素选择器，就像有p and h1元素选择器。不过好像没有，我要补充一下class="bar"以便选择它们。

我的问题是是否有更干净的方法来选择bar元素。

在里面添加 CSS 代码不太好bar组件因为当bars 用于其他组件内部，我don't想要隐藏它们。

上课似乎是最好的方式。如果您希望它对于组件通用，则将其放在组件的根元素上；如果您希望它特定于该用途，则仅将其放在组件标记上。

此外，您没有理由不能使用自定义标签作为组件的根元素；只要标签没有映射到组件，它就会保留在 DOM 中，并且您可以将其用于 CSS 选择。不过，我不推荐它，因为我认为这个用例不是引入新标签的充分理由。

例如，如果您的组件模板如下所示：

<template>
  <bar-container>
    Hi there
  </bar-container>
</template>

而你没有bar-container组件定义后，您将能够使用 CSS 来选择bar-container，这将是每个的容器元素bar成分。但它同样易于使用<div class="bar-container">反而。