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

<template id="card-box">
    <style>
        :host {
            display: inline-block;
            vertical-align: top;
            margin-top: 0.5em;
        }
        .box {
            width: 100%;
            height: 100%;
            border: 2px solid;
            border-radius: 4px;
            box-sizing: border-box;
            vertical-align: middle;
            text-align: center;
            display: flex;
            justify-content: center;
            align-content: center;
            flex-direction: column;
        }
        #box2 {
            display: flex;
            justify-content: center;
            align-content: center;
            flex-direction: row;
        }
        
    </style>
    <div class="box">
        <div id="box2">
            <content></content>
        </div>
    </div>
</template>

<template id="card-boxes">
    <style>
        :host {
            width: 100%;
            vertical-align: top;
        }
        ::content card-box + card-box {
            padding-left: 2px;
        }
    </style>

    <style id="box-size">
        ::content card-box {
            width:2.5em;
            height:2.5em;
        }
    </style>

    <content></content>

</template>

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

    (function(window, document) {
        var elemName = 'card-boxes';
        var mainDoc = document;
        var importDoc = document.currentScript.ownerDocument;

        function createBoxes(element, count) {
            while (element.firstChild) {
                element.removeChild(element.firstChild);
            }
            for (var i = 0; i < count; ++i) {
                element.appendChild(document.createElement("card-box"));
            }
        }

        var proto = Object.create(HTMLDivElement.prototype);
        Object.defineProperty(proto, "size", {
            get: function () {
                return "";
            },
            set: function (value) {
                var root = this.shadowRoot;
                var style = root.getElementById("box-size");
                style.innerHTML = "\
                ::content card-box {\
                    width:" + value + "em;\
                    height:" + value + "em;\
                }\
                ";
            }
        });
        Object.defineProperty(proto, "count", {
            get: function () {
                return "";
            },
            set: function (value) {
                createBoxes(this, value);
            }
        });
        proto.createdCallback = function () {
            var template = importDoc.getElementById(elemName);
            var clone = mainDoc.importNode(template.content, true);
            var root = this.createShadowRoot();
            root.appendChild(clone);

            this.size = this.getAttribute('size') || "1";
            this.count = this.getAttribute('count') || "1";
        }
        proto.attributeChangedCallback = function (name, oldValue, newValue) {
            switch (name) {
                case "size": this.size = newValue; break;
                case "count": this.count = newValue; break;
            }
        }

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

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