scoped的坑

之前经常有遇到这样一个问题:<style>标签添加了scoped属性之后,有些css样式是无效的。后来查了官网才知道,官方早有解释。如下:

样式无效是因为具有作用域的样式无法作用于动态生成的元素(即组件创建完成之后生成的元素)。请看下面的例子:

上面例子中,p标签里面的文字并没有渲染成蓝色,就是因为p标签是在mounted中动态生成的内容,对于这个问题,我们除了改用没有作用域的全局样式(即去掉scoped属性)以为,还可以使用深度作用选择器(<<<或/deep/)来解决,如下:

或者:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,758评论 1 45
  • ORA-00001: 违反唯一约束条件 (.) 错误说明:当在唯一索引所对应的列上键入重复值时,会触发此异常。 O...
    我想起个好名字阅读 5,451评论 0 9
  • 1.当加了 scoped的时候,有时候就是无法覆盖组件原有的样式?这很苦恼,若不想组件的样式全局污染,那就只能要么...
    丰起云啸阅读 462评论 0 0
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,163评论 0 21
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 786评论 0 3