rpg-cards/generator-next/components/card-page.html

<template id="card-page">
    <style type='text/css'>
        :host {
            display: flex;
            align-content: center;
            justify-content: center;
            flex-direction: row;
            flex-wrap: wrap;
            page-break-before: always;
            page-break-after: always;
            padding: 0;
            border: 0;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            margin-bottom: 16px;
            background-color: white;
            box-shadow: 0 0 8px rgba(0,0,0,0.5);
        }

        @media print {
            :host {
                margin: 0;
                padding: 0;
                border: 0;
                box-shadow: 0;
            }
        }
    </style>

    <content></content>

</template>

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