我从我的数据库中收到原始 HTML 并将其呈现在前端，但是，即使应用了 HTML 类之一，它也没有任何作用

Question

Here's the issue, I get some messages from the database and send them to my front-end in order to render them. The message looks like this:

<span class="emoji">
    <img class='responsive-image' src="https://media.discordapp.net/attachments/733747075455647898/733753424008577024/Akali.png">
</span>

So I use the v-html directive to render it like this:

<p v-html="message.message"></p>

I also have the 2 classes in the same component:

.emoji {
    display: inline-block;
    width: 30px;
    height: 30px;
}
.responsive-image {
    width: 100%;
    height: 100%;
}

The problem is that even though the <span> element is rendered with a class of .emoji , the rules of that class are not applied. Also when I inspect the <span> element, on the right side of the developers console, I don't see the <span> class or its rules. The weird thing is that the responsive-image class on the image works just fine.

Surprisingly, if I hard-code the HTML like this:

<div class='message-container'>
    <div class="username-date-container">
        <p class='username'>Username</p>
        <p class='date'>Date</p>
    </div>
    <p>
        <span class="emoji">
            <img class='responsive-image' src="https://media.discordapp.net/attachments/733747075455647898/733753424008577024/Akali.png">
        </span>
    </p>
</div>

Everything gets rendered correctly and the rules of the emoji class are applied. So I've no clue what's going on.

Answer 1

The problem is using scoped CSS with v-html . Any markup injected via v-html is treated like being from a child component. From the docs :

DOM content created with v-html are not affected by scoped styles, but you can still style them using deep selectors.

If you inspect the elements in the browser developer tools (as in your picture) you'll see elements with attributes like data-v-2bc3d388 , where the last part can vary. This attribute will be applied to every element that is created by the template for that particular component. However, it won't be present for elements inserted using v-html or those created by child components. As a result, any scoped CSS won't apply to those elements.

You can see why by inspecting the output CSS. In your picture, if you look over on the right-hand side you'll see some rules for .message-container[data-v-2bc3d388] . To the right of that, written in grey is the source of the rules, in this case <style> . If you click on that it'll jump to the relevant CSS in the page and you can see the output CSS for yourself. You should see that all the selectors require elements to have [data-v-2bc3d388] , which your v-html elements do not.

As for why your responsive class is working correctly, that's not entirely clear. My best guess would be that you've got that same rule defined in another file but you've forgotten to scope it so it has leaked out and is effectively global. Inspecting the relevant element should allow you to check. You could also try removing the CSS from the current component to see whether it makes any difference.

There are various ways you might solve this. You could make that particular rule unscoped, either by adding it to your global CSS or by adding another <style> tag to your component that isn't scoped.

Another solution would be to use a deep selector, same as you would if you wanted to style a child component:

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Answer 2

I assume this is more like a CSS problem where there exists a CSS selector has a higher score to override your span.emoji class, so try to inspect it again to see which part of your CSS code has higher select specificity or simply add ".important" to your,emoji styling query. only if the CSS file is scoped to that particular HTML so it won't affect your other components' styling properties.