the problem is difficult to describe. Let me give an example. For example, the following code is in the header of the page:

<template>
  <div class="header">
    ...
  </div>
</template>
<script>
export default {
  mounted: ()=>{
    document.getElementsByClassName("header")[0].style.colro="red"
  }
}
</script>
<style scoped>
  .header {
    background: -sharp999999;
  }
<style>

because scoped, is added to the above code style, you don"t have to worry about using the same classname (.header) elsewhere in the page. The .header style here must point to the header in this component. But if you want to use JS to control header style is not easy, if there is a header style elsewhere on the page, then document.getElementsByClassName ("header") [0] may not be the DOM, I want to choose. Excuse me, how can I use JS to control DOM without worrying about the style with the same name?