Functional Base Component with class and style inheritance

readme.md

this line:
:class="['alert', data.class, data.staticClass].join(' ')" :style="data.style"
allows the class and style to be injected from the parent component

BaseAlert.vue

<template functional>
  <div :class="['alert', data.class, data.staticClass].join(' ')" :style="data.style">
    <slot name="icon">
    </slot>
    <slot name="body">
    </slot>
  </div>
</template>

OtherAlert.vue

<template>
  <BaseAlert class="c__alertemailvalidation" :class="'dynamicClass'" :style="{display: isVisible ? 'inherit' : 'none'}">
    <div slot="icon" class="alert-icon">
    </div>
    <div slot="body">
      <h3>Title</h3>
      <p>
        message
      </p>
      <button/>DO IT</button>
    </div>
  </BaseAlert>
</template>

<script>
import BaseAlert from './BaseAlert';

export default {
  name: 'OtherAlert',
  components: {
    BaseAlert,
  },
};
</script>