AustinGil/vuetensils

VAlert dismissible doesn't work with scoped css

safejace opened this issue · 5 comments

safejace commented

I'm wrapping the <VAlert> in my own component

<script setup>
  import { VAlert } from 'vuetensils/src/components'

  defineProps({
    heading: {
      type: String,
      default: ''
    },
    level: {
      type: String,
      default: 'info',
      validator(value) {
        return ['info', 'alert', 'warning', 'success'].includes(value)
      }
    }
  })
</script>

<template>
  <VAlert
    v-bind="$attrs"
    dismissible
    :class="[level]"
    :classes="{ root: 'sv-callout', dismiss: 'sv-alert__dismiss' }"
  >
    <div class="heading">
      <slot name="icon-left" />
      <h4>{{ heading }}</h4>
      <slot name="icon-right" />
    </div>
    <p class="body">
      <slot />
    </p>
  </VAlert>
</template>

<style lang="postcss" scoped>
  .sv-callout {
     {...}
  }

  .sv-callout__dismiss {
    // not working here
    @apply absolute inset-y-0 right-0 text-2xl mx-4;
  }
 
  {...}
</style>

when inspecting the element... the dismissible item doesn't get the scoped [data-v-xxx] added to it

<div id="root" data-v-app="">
  <div role="alert" class="vts-alert sv-callout" icon-left="" icon-right="" default="Lorem ipsum dolor" data-v-372d8d2a="">
  <!-- @slot The default slot content that is shown to the user -->
  <div class="heading" data-v-372d8d2a="">
    <h4 data-v-372d8d2a="">Heading Text</h4>
  </div>
  <p class="body" data-v-372d8d2a="">Lorem ipsum dolor</p>
  <button aria-label="Dismiss this alert" class="vts-alert__dismiss sv-alert__dismiss">
  <!-- @slot The dismiss button content --> × </button>
  </div>
</div>
AustinGil commented

Can you create a demo in Codesandbox?

safejace commented

can you link me to an example of codesandbox working with vuetensils loaded up.

I just tried to get it working and it's not loading the vuetensils despite adding as a dependency

safejace commented

thanks @AustinGil

set it up here:
https://codesandbox.io/s/vue-3-vuetensils-alert-forked-pzkdou?file=/src/App.vue

if you turn off/on the scoped attribute on the style section in MyAlert.vue should show you what I mean

AustinGil commented

A, gotcha. Yeah, that is not a problem with Vuetensils as much as it's a known problem with Vue. See https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

There are a couple solutions. Use on of the "deep" selectors (>>>, /deep/, ::v-deep):

<style scoped>
>>> .vts-alert__dismiss  {
  background: red;
}
</style>

Or you can combine both scoped and not scoped styles:

<style>
.vts-alert__dismiss  {
  background: red;
}
</style>
<style scoped>
/** scoped stypes */
</style>
  • 👍1