Vuejs.org: Styleguide: multiple style blocks

[Christilut]

I didn't see anything about this in the styleguide so I wanted to ask.

I sometimes use 2 style blocks in my .vue components, one with scoped and one without.

The reason for this is that sometimes you need to include a third party library that dynamically alters the DOM which the scoped style has no access to.
So I give my template a specific class (sometimes like component-tooltip) which is sure not to conflict with any libraries or my other components and reference that class name in the global style block.

Simplified example:

<template>
<div class="component-tooltip">
  <thirdparty-library></thirdparty-library>
</div>
</template>

<script>
// omitted
</script>

<style scoped>
 // scoped css, no classname needed
</style>

<style>
.component-tooltip {
  .thirdparty-library {
    // do stuff here that is specific to this component
  }
}
</style>

The styleguide says:

For applications, styles in a top-level App component and in layout components may be global, but all other components should always be scoped.

But if a third party library is fully encapsulated by my custom component, I don't really want to split up this styling. Especially not if it is very little code.

What do other people think about this?

[chrisvfritz]

In these cases, you can use either a deep selector with scoped:

<style scoped>
.tooltip >>> .thirdparty-library {
  // ...
}
</style>

Or :global with a CSS module:

<style module>
.tooltip :global(.thirdparty-library) {
  // ...
}
</style>

I'll add notes about these strategies in the detailed explanation for this rule. 👍

[Christilut]

Woah, I didn't know about the deep selector. Mind blown!

Guess I'll be using that, should fix all my problems :)