【所需知识】
-
指定属性的class生效
<style> /**以下定义的class只会在带有f1d5ggfg属性的标签上生效**/ .test[data-f1d5ggfg] {} </style> <!-- 会生效 --> <div class="test" data-f1d5ggfg> </div> <!-- 不会生效 --> <div class="test"> </div>
-
带有scoped属性的style会生成唯一的属性,并添加在内部所有标签。(类似上方示例中的 [f1d5ggfg] )
转义前:
<div>123</div> <style scoped> .test { color: red } </style>
转义后:
<!-- sdfererfd当前所处html的唯一标识 --> <div data-sdfererfd class="test">123</div> <style type="text/css"> .test[data-sdfererfd] { color: red } </style>
【正文】
-
对于组件中有子组件的,父组件scoped生成的style唯一标识会添加到子组件的根元素上
避免子组件最外层class和父组件中使用的class名称一致。