How to isolate or nullify an embedded application from external styles?

Question

css

For example, I am writing a "calculator" on Vue... I made it up using the scoped option, compiled and got js and css.

<style lang="scss" scoped>
    #calc {
        .какой_то_элемент {
            color: red;
        }
    }
</style>

For my part, everything is perfect and the calculator is not conflicting (or not?), but you need to add this calculator to the site where other properties are specified in the global styles for the same class (perhaps not now, but in the future) and the layout will work (for example, if this wordpress calculator where you can change themes and each theme has its own global classes).

//...где то в глобальных стилях
        .какой_то_элемент { //с совершенно другим замыслом
            position: fixed;
            width: 20px;
            height: 20px;
            top: 4px:
            right: 4px;
        }

In general, the problem with the name of the same classes and, in theory, adding prefixes should solve it (maybe there is some webpack plugin for this or another solution).

Answer 1

Isolated styles work only in your project. And isolate the styles for individual components - so that they do not overlap with the styles of another component. For example, your project uses two calculators: a simple one and an engineering one. So that the styles of calculators do not intersect - they are isolated. In fact, this is so-so practice. All this is easily solved by using unique classes.
And, of course, if you integrate your project into some other one, no one guarantees that some more specific styles of the target project will not overwrite yours. So unique prefixes for classes are quite an option.

Answer 2

An embedded application must be in an iframe, the only way today is to 100% isolate both styles and scripts.
It will be elementary on the site banal

div {
  color: red !important;
}

and your application will already look different.
Well, there is also js with mankipatching.
And the iframe will protect you quite well from both

Answer 3

For this case, you should pay attention to the BEM methodology:
1. https://ru.bem.info/ - to understand;
2. https://i-am.studio/bem - if not very caught up.
If the project is yours, you are able to write styles in the spirit of closed functional programming, and it will come in handy in Vue. If the project is not yours... Well...
If the project is not yours, then you can catch a set of parameters (say, find elements with sets of data attributes on the page) or through a specific class (forcing the user to specify it so that it just works) and start styles for it through JS, well, or just styles. Ultimately, it’s easy to indicate in the documentation that ay-yay, don’t be a moron, don’t write garbage, otherwise it won’t work (however, this is already obvious, because if it doesn’t work, then most likely the peeplian will reach it himself or google it, what are the problems of the conflict).