Style conflicts between Vue components and vue component style pollution

Style conflicts between Vue components and vue component style pollution

1. How is pollution produced?

Thanks to Vue-loader, Vue can use componentized writing similar to Web Component,<template></template><style></style><script></script>In most cases, we want the styles defined between components to be isolated from each other. In Weex, components are naturally isolated, but in Vue, the operating carrier is the browser, all style classes still insert headers through style labels, affecting global and cross-contamination.

2. added the Scoped identifier.

Still Vue-loader. By adding a scoped ID to the style label of the component, Vue-loader adds scopeId as the attribute for each element node of the component during compilation, at the same time, add the attribute selector scopeId to all style classes to achieve the isolation effect, which is roughly like the following:

Each component has a unique scopeId. In theory, style isolation should be achieved. In fact, this method is good enough, except for the following situations ~~

Iii. ScopeId inheritance

Let's further improve the above example:

// Parent component <template> <div class = "bg"> </div> <Sub> </div> </template> <script> import Sub from '. /sub '; export default {components: {Sub }}; </script> <style scoped>. bg {background-color: #000; width: 100px; height: 100px ;} </style> // sub-component <template> <div class = "bg"> </div> </template> <script> export default {}; </script> <style scoped>. bg {width: 300px; height: 300px; margin-top: 5px ;}</style>

Because we use the scoped logo for style isolation, the sub-component div should not have any background color, but the reality is always hitting the face ~~

I don't know if you see the problem in your eyes:

The root element of the child element inherits the ScopeId of the parent element!

The root element of the child element inherits the ScopeId of the parent element!

The root element of the child element inherits the ScopeId of the parent element! (It must be important to say it three times)

Because the root element of a child element not only has its own ScopeId attribute, but also inherits the ScopeId attribute of the parent element, the style class bg of the parent element is still valid for it.

4. How can this problem be solved?

The method of cracking is also very simple. It provides an alternative style name (if any) for the root element of each component. For example, do not name each component as wrap based on the business name: b1-wrap, b2-wrap, etc.

The non-root element in the component. No matter how the class name is named or how it is renamed, it will not be contaminated ~~

5. This should be a bug in Vue-loader.

Yes, this should be a bug. How should I solve it? Instead of adding attributes during compilation, I directly modify the class name according to scopeId ~~

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.