vue 样式仅在我执行 ::deep 时应用，即使它不是组件样式为什么？

问题描述

我搜索了一些有关样式的信息，然后遇到了 ::deep 命令。但是，据我所知，::deep 是关于子组件样式的。

为什么在这种情况下我必须使用 ::deep？

我的模板

<transition name="openup" v-on:after-enter="transitionend">

<div class='horizontal-container dark-background white-text' v-if='showup' ref='container'>
    <canvas id='myCanvas' ref='myCanvas'></canvas>
    <div class='menu-text white-text medium medium-text'>This is Landing Page</div>
    <year-select class='year-selection' @click='drawSpheres'></year-select>
    <div id="labels" ref='labelContainer'></div>
</div>
</transition>

我首先尝试像这样设置脚本中新添加的 div 元素的样式

   drawTexts(contents,targetMesh){

const countyName = contents=='BK'? 'brooklyn':
contents=='MN'? 'Manhattan':
contents=='QN'? 'Queens':
contents=='BX'? 'bronx':'unkNown';


const labelContainer = this.$refs.labelContainer;
const elem = document.createElement('div');
elem.textContent=countyName;
elem.classList.add('countytag')
labelContainer.appendChild(elem)

const tempV = new THREE.Vector3();

targetMesh.updateWorldMatrix(true,false);
targetMesh.getWorldPosition(tempV)


tempV.project(camera);



const x = (tempV.x * .5 + .5) * canvas.clientWidth;
const y = (tempV.y * -.5 + .5) * canvas.clientHeight;
elem.style.transform = `translate(-50%,-50%) translate(${x}px,${y}px)`;

},

它没有解决，我尝试为没有解决的元素添加 ::deep

#labels{
  position: absolute; 
  left: 0;            
  top: 0;
}

#labels > div {
  position: absolute;  
  left: 0;          
  border:solid 1px red;   
  cursor: pointer;     
}
#labels > div:hover {
  color: red;
}

然后当我这样做时它开始工作

::v-deep #labels{
  position: absolute; 
  left: 0;            
  top: 0;
}

::v-deep #labels > div {
  position: absolute;  
  left: 0;          
  border:solid 1px red;   
  cursor: pointer;     
}
::v-deep #labels > div:hover {
  color: red;
}

是因为过渡标签吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

scoped shadow-dom vue.js