Michael Thiessen

Special CSS pseudo-selectors in Vue

Invalid Date

If you want some styles to apply specifically to slot content, you can do that with the :slotted pseudo-selector:

<style scoped>

  /* Add margin to <p> tags within the slot */

  :slotted(p) {

    margin: 15px 5px;

  }

</style>

You can also use :global to have styles apply to global scope, even within the <style scoped> block:

<style scoped>

  :global(body) {

    margin: 0;

    padding: 0;

    font-family: sans-serif;

  }

</style>

Of course, if you have lots of global styles you want to add, it's probably easier to just add a second <style> block:

<style scoped>

  /* Add margin to <p> tags within the slot */

  :slotted(p) {

    margin: 15px 5px;

  }

</style>



<style>

  body {

    margin: 0;

    padding: 0;

    font-family: sans-serif;

  }

</style>

Check out the docs for more info.

Related Articles