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

<template id="card-fill">
    <style id="style">
        :host {flex: 1;}
    </style>

</template>

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

        var proto = Object.create(HTMLElement.prototype);
        Object.defineProperty(proto, "size", {
            get: function() {
                return "";
            },
            set: function (value) {
                this.setAttribute('size', value);

                var root = this.shadowRoot;
                var style = root.getElementById("style");
                style.innerHTML = ":host{flex:"+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";
        }
        proto.attributeChangedCallback = function (name, oldValue, newValue) {
            switch (name) {
                case "size": this.size = newValue; break;
            }
        }

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

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