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

<template id="card-rule">
    <style>
        #rule {
            width: 100%;
            height: 4px;
            margin-top: 3px;
            margin-bottom: 3px;
        }
    </style>

    <svg id="rule" height="1" width="100" viewBox="0 0 100 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
        <polyline points="0,0 100,0.5 0,1"></polyline>
    </svg>

</template>

<script>
    (function(window, document) {
        var elemName = 'card-rule';
        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>