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

<template id="card-description">
    <style>
        div {
            margin-top: 0.5em;
            margin-bottom: 0.0em;
            font-size: inherit;
        }

        ::content > * {
            display: inline;
            font-size: inherit;
            color: black;
        }

        ::content > h4 {
            font-weight: bold;
            font-size: inherit;
            font-style: italic;
        }

        ::content > h4:after {
            content: ".";
        }

        ::content > h4 + p {
            margin-left: 0.4em;
        }
    </style>

    <div>
        <content></content>
    </div>
</template>

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

        var proto = Object.create(HTMLElement.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>