rpg-cards/generator/components/card-section.html

<link href='http://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>

<template id="card-section">
    <style>
        :host {
            border-bottom: 1px solid;
            font-size: 10pt;
            font-variant: small-caps;
            font-weight: normal;
            letter-spacing: 1px;
            margin: 0;
            margin-bottom: 4px;
            border-color: inherit;
        }
    </style>

    <content></content>

</template>

<script>
    (function(window, document) {
        var elemName = 'card-section';
        var mainDoc = document;
        var importDoc = document.currentScript.ownerDocument;

        var proto = Object.create(HTMLDivElement.prototype);
        proto.createdCallback = function () {
            var template = importDoc.getElementById(elemName);
            var clone = mainDoc.importNode(template.content, true);
            var root = this.createShadowRoot();
            root.appendChild(clone);
        }

        mainDoc.registerElement(elemName, { prototype: proto });

    })(window, document);
</script>