{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue-loader/issues/821","repository_url":"https://api.github.com/repos/vuejs/vue-loader","labels_url":"https://api.github.com/repos/vuejs/vue-loader/issues/821/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue-loader/issues/821/comments","events_url":"https://api.github.com/repos/vuejs/vue-loader/issues/821/events","html_url":"https://github.com/vuejs/vue-loader/issues/821","id":229890150,"node_id":"MDU6SXNzdWUyMjk4OTAxNTA=","number":821,"title":"<style> 上的 scoped 会使我无法修改子组件中的样式，但我又不得不使用它，希望可以改进。","user":{"login":"baijunjie","id":7956480,"node_id":"MDQ6VXNlcjc5NTY0ODA=","avatar_url":"https://avatars0.githubusercontent.com/u/7956480?v=4","gravatar_id":"","url":"https://api.github.com/users/baijunjie","html_url":"https://github.com/baijunjie","followers_url":"https://api.github.com/users/baijunjie/followers","following_url":"https://api.github.com/users/baijunjie/following{/other_user}","gists_url":"https://api.github.com/users/baijunjie/gists{/gist_id}","starred_url":"https://api.github.com/users/baijunjie/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/baijunjie/subscriptions","organizations_url":"https://api.github.com/users/baijunjie/orgs","repos_url":"https://api.github.com/users/baijunjie/repos","events_url":"https://api.github.com/users/baijunjie/events{/privacy}","received_events_url":"https://api.github.com/users/baijunjie/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":10,"created_at":"2017-05-19T07:13:46Z","updated_at":"2018-06-14T08:34:26Z","closed_at":"2017-05-24T09:34:10Z","author_association":"NONE","body":"### What problem does this feature solve?\r\n由于 scoped 是利用CSS3属性选择器的原理来控制作用域，而 .vue 组件中会给所有html元素标签加上一个统一的 `data-*` 的属性。在正常情况下没有问题。\r\n\r\n但是当我在这个组件中引入了另一子组件的时候，子组件生成的html元素并没有被加上这样的属性作用域。\r\n这就导致我没有办法去修补这个子组件中的样式。因为通常情况下子组件都是第三方开源库。\r\n\r\n所以，我希望增加另一种 scoped 模式，是在编译后的CSS选择器上的属性选择器移动到“选择器的根选择器上”，而不是现在的“尾选择器”，这样在限定组件的样式作用域的同时，仍然可以使样式作用于该组件中的任何元素上，同时也不需要为每一个html元素都添加`data-*`，只需要在组件内最顶层html元素上添加就可以了。\r\n\r\n说起来有点绕，看Example如下：\r\n\r\n### What does the proposed API look like?\r\n**编译前**\r\n子组件\r\n```html\r\n<template>\r\n  <div class=\"title\">我是header</div>\r\n</template>\r\n```\r\n父组件\r\n```html\r\n<template>\r\n  <div class=\"header\">\r\n    <v-title></v-title>\r\n  </div>\r\n</template>\r\n\r\n<style scoped>\r\n.header {\r\n  background-color: #ff0;\r\n}\r\n.header .title {\r\n  color: #fff;\r\n}\r\n</style>\r\n```\r\n\r\n**编译后**\r\n现在是\r\n```html\r\n<div data-v-9f807410 class=\"header\">\r\n  <div class=\"title\">我是header</div>\r\n</div>\r\n```\r\n```css\r\n.header[data-v-9f807410] {\r\n  background-color: #ff0;\r\n}\r\n.header .title[data-v-9f807410] {\r\n  color: #fff;\r\n}\r\n```\r\n这对子组件中的`.title`完全不起作用\r\n\r\n我理想中是\r\n```css\r\n.header[data-v-9f807410] {\r\n  background-color: #ff0;\r\n}\r\n.header[data-v-9f807410] .title {\r\n  color: #fff;\r\n}\r\n```\r\n既可以修改`.title`的样式，又可以控制作用域\r\n\r\n<!-- generated by vue-issues. DO NOT REMOVE -->"},"comment":{"url":"https://api.github.com/repos/vuejs/vue-loader/issues/comments/397216374","html_url":"https://github.com/vuejs/vue-loader/issues/821#issuecomment-397216374","issue_url":"https://api.github.com/repos/vuejs/vue-loader/issues/821","id":397216374,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NzIxNjM3NA==","user":{"login":"deepthan","id":22695767,"node_id":"MDQ6VXNlcjIyNjk1NzY3","avatar_url":"https://avatars1.githubusercontent.com/u/22695767?v=4","gravatar_id":"","url":"https://api.github.com/users/deepthan","html_url":"https://github.com/deepthan","followers_url":"https://api.github.com/users/deepthan/followers","following_url":"https://api.github.com/users/deepthan/following{/other_user}","gists_url":"https://api.github.com/users/deepthan/gists{/gist_id}","starred_url":"https://api.github.com/users/deepthan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/deepthan/subscriptions","organizations_url":"https://api.github.com/users/deepthan/orgs","repos_url":"https://api.github.com/users/deepthan/repos","events_url":"https://api.github.com/users/deepthan/events{/privacy}","received_events_url":"https://api.github.com/users/deepthan/received_events","type":"User","site_admin":false},"created_at":"2018-06-14T08:34:26Z","updated_at":"2018-06-14T08:34:26Z","author_association":"NONE","body":"可以这样写：\r\n父组件cssName+ `/deep/`+第三方库需要更改的cssName\r\n```\r\n.parentCssName  /deep/  .libCssName{\r\n\r\n}\r\n```"}}
{"actor":{"display_login":"deepthan"}}