Skip to content

Instantly share code, notes, and snippets.

@johnathankent johnathankent/picard.vue
Last active Oct 3, 2017

Embed
What would you like to do?
Reactive Style Specificity using custom attributes (hack)
<!-- picard.vue -->
<template>
<wesley :class="$style.shutupwesley" data-says-because-picard-said-make-it-so><!-- <<== Added custom data-attr here -->
</wesley>
</template>
<script>
import wesley from './wesley.vue'
export default {
name: 'picard',
components: { wesley }
}
</script>
<style module>
.shutupwesley[data-says-because-picard-said-make-it-so] { color: crimson; background-color: crimson; }
</style>
<div id="starship-enterprise">
<a class="picard_shutupwesley_cptJL_0 wesley_wesley_cru5hr_0" data-says-because-picard-said-make-it-so href="https://codepen.io/johnathankent/pen/QqqdWW/">
Is it cool if my dance crew uses the holodeck to practice our new sick moves?</a>
</div>
<style>
/* It really doesn't matter what order they render - this will override: */
.picard_shutupwesley_cptJL_0[data-says-because-picard-said-make-it-so] {
color: crimson;
background-color: crimson;
}
/* over-ridden */
.wesley_wesley_cru5hr_0 {
color: blue;
background-color: grey;
}
</style>
<!-- wesley.vue -->
<template>
<a :class="$style.wesley" :href="url">Is it cool if my dance crew uses the holodeck to practice our new sick moves?</a>
</template>
<script>
export default {
name: 'wesley',
data () { return { url: 'https://codepen.io/johnathankent/pen/QqqdWW/' } }
}
</script>
<style module>
.wesley { color: blue; background-color: grey; }
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.