When Vue uses v-html bindings, the elements inside do not inherit the external CSS, the solution

Problem

You want to bind the HTML content generated by the parent text with Vue, but find that the CSS style doesn't work at all and the selector doesn't.

Code:

<class= "announcedetailimg"  v-html= "Detaillist.content"  ></div>

Set Style:

<style lang= "less" scoped>.announcedetailimg {    width:100%;} . announcedetailimg img {    width:100%!important;     Display:block;} . announcedetailimg P {    color:#333;     font-size:16px;}     </style>

After this, the discovery style does not work

Solution:

The scoped property causes the CSS to take effect only for the current component (implemented with the CSS3 property selector + generated random property), and the HTML binding renders the content as a subcomponent, and the subcomponents are not added to the corresponding attributes, so the CSS is not applied.

If you fix it, just remove the scoped attribute.

When Vue uses v-html bindings, the elements inside do not inherit the external CSS, the solution