Vue

by khamer

HTML

<div id="app">
  <foo v-slot="{test}">
    <ul>
      <li><a v-foo href="#">Lorem.</a></li>
      <li><a v-foo href="#">Omnis.</a></li>
      <li><a v-foo href="#">Officiis!</a></li>
    </ul>
  </foo>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

Vue.directive('foo', {
	bind(el, binding, vnode) {
  	console.log(vnode)
  }
})

Vue.component('foo', {
	render() {
  	return this.$scopedSlots.default({test: 'hello'})
  }
})

new Vue({
  el: "#app"
})