Today, I found a problem when overwriting the iView component style. I could not overwrite the original style of the component. Finally, I found the answer in github issue: Do not use the scoped attribute. So I looked up the article on Scoped.

We assume that such components are called module-private components, and other unscoped components are called module-general components. By looking at the DOM structure, we found that VUE achieves the purpose of style privatization modularization by adding unique tags on the DOM structure and CSS styles to ensure uniqueness.

The code is as follows:

// valchange.less (using nested rules)#valueSlide{.bigSlider .ivu-slider-wrap{ height: 6px; } .bigSlider .ivu-slider-bar { height: 6px; } .bigSlider .ivu-slider-button{ width: 14px; height: 14px; }} // HTML section <style lang="less" scoped>
	@import "./valChange.less";
</style>
<div class="valid-panel">
	<div class="containerBox">
		<div id="valueSlide" v-bind:style="validStyle">
			<Slider ></Slider>
		</div>
	</div>
</div>
Copy the code

When we use the scoped attribute in the style, we get the following:

As you can see from the above, the component with the scoped attribute does two things to achieve component-style modularity:

  • Add a non-repeat to the HTML DOM nodedataAttributes (such as:data-v-19fca230) to indicate his uniqueness
  • At the end of each CSS selector (the compiled generated CSS statement), add the current component’sdataProperty selectors (e.g[data-v-2311c06a]) to privatize styles

Here’s the problem: For other components called by the current component, the data attribute is only added to the first layer of HTML:

Solution: Do not use the scoped attribute. See this article for more details

To summarize scoped’s three rendering rules:

  • Add a non-repeating data attribute to the HTML DOM node.data-v-19fca230) to indicate his uniqueness
  • At the end of each CSS selector (the compiled generated CSS statement), add the current component’sdataProperty selectors (e.g[data-v-19fca230]) to privatize styles
  • If the component contains other components, only the data attribute of the current component is added to the outermost tag of the other component

1. How can style global contamination be resolved without scoped? The use of Scoped is recommended for privatized components. The exclusion of this article only applies to style overwrites of existing UI libraries (which would be difficult if people used Scoped). First, we resolve global contamination of the component style, that is, if we override the style here without using scoped, the component will be overwritten when we call it elsewhere. So when we use a component, we give the component a class name or some other discriminating attribute (ID), and the override style overrides the class name. Second, resolve global contamination of other styles if we pass:

<style lang="less">
    @import "./test.less";
</style>
Copy the code

<style lang="less" scoped>
    @import "./test.less";
</style>
<style lang="less"</style>Copy the code

This covers the style, other styles will not be covered in the global effect code, I will subsidize the code, interested students can try their own. Note the order of the two labels.