JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<my-component>
    <span class="header">level 1 head</span>
    <span class="body">level 1 body
        <my-component>
            <span class="header">level 2 head</span>
            <span class="body">level 2 body</span>
        </my-component>
    </span>
</my-component>

JavaScript

var MyComponent = Vue.extend({
    template: '<dl class="my-component"><dt><content select=".header"></content></dt><dd><content select=".body"></content></dd></dl>'
});

new Vue({
    el: 'body',
    data: {
    },
    methods: {
    },
    components: {
        'my-component': MyComponent
    }
})