ShadowDOM

[BigBlueHat]

I realize this may fall a bit outside of Vue's core, but right now the one thing that's luring me away from using Vue (though it has yet to succeed! :wink:) is Web Components--specifically the ShadowDOM.

What I want most out of the ShadowDOM is the promise of "scoped CSS" (browser's seem to be focusing on ShadowDOM and punting on the <style scoped> approach).

The closest (and smallest) implementation I've found so far is Bosonic.

If it were possible to mix this into Vue, that'd suite me just fine! :smile_cat:

Regardless, I thought I'd share. :smile:

[yyx990803]

I'd really leave that to the actual standard being implemented in Browsers rather than putting it into Vue.

Bosonic's approach is via transpiling during the build step - you can achieve something very similar with Webpack + vue-loader or Browserify + vueify, by using a CSS preprocessor:

<style lang="stylus">
.my-component // scope all your rules under this
  div
    color #f00
  p
    color #0f0
</style>

<template>
  <div class="my-component">...</div>
</template>

<script>
module.exports = {
  replace: true
}
</script>

[thelinuxlich]

vueify?