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

<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

<template id="rpg-card">
    <style type='text/css'>
        :host {
            /* Border */
            padding: 6px;
            border-radius: 4px;
            box-sizing: border-box;
            /* Flex display of children */
            position: relative;
            display: flex;
            flex-direction: column;
            /* Font */
            font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
            font-size: 8pt;
        }

        ::content > card-title:first-child {
            margin-top: -2px;
            margin-bottom: 4px;
        }

        ::content > card-title:last-child {
            margin-top: 4px;
            margin-bottom: -2px;
        }
    </style>

    <style type='text/css' id="color-style">
    </style>

    <style type='text/css' id="card-size">
        :host{width: 2.5in;height: 3.5in;}
    </style>

    <content></content>

</template>

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

        var proto = Object.create(HTMLDivElement.prototype);
        Object.defineProperty(proto, "color", {
            get: function () {
                return "";
            },
            set: function (value) {
                var root = this.shadowRoot;
                var style = root.getElementById("color-style");
                style.innerHTML = "\
                :host {\
                    color: "+value+";\
                    background-color: " + value + ";\
                    border-color: " + value + ";\
                }\
                ::content card-rule /deep/ svg {\
                    fill: " + value + ";\
                }\
                ::content card-boxes /deep/ svg rect {\
                    stroke: " + value + ";\
                }\
                ::content card-icon {\
                    background-color: " + value + ";\
                }\
                ::content card-back /deep/ #outer {\
                    background: radial-gradient(ellipse at center, white 20%, " + value + " 120%);\
                }\
                ";
            }
        });
        Object.defineProperty(proto, "size", {
            get: function () {
                return "";
            },
            set: function (value) {
                var root = this.shadowRoot;
                var style = root.getElementById("card-size");
                switch (value) {
                    case "full": style.innerHTML = ":host{width:100%;height:100%;}"; break;
                    case "25x35": style.innerHTML = ":host{width: 2.5in;height: 3.5in;}"; break;
                    case "225x35": style.innerHTML = ":host{width: 2.25in;height: 3.5in;}"; break;
                    case "25x50": style.innerHTML = ":host{width: 2.5in;height: 5.0in;}"; break;
                    case "35x50": style.innerHTML = ":host{width: 3.5in;height: 5.0in;}"; break;
                    case "75x50": style.innerHTML = ":host{width: 7.5in;height: 5.0in;}"; break;
                }
                
            }
        });
        proto.createdCallback = function () {
            var template = importDoc.getElementById(elemName);
            var clone = mainDoc.importNode(template.content, true);
            var root = this.createShadowRoot();
            root.appendChild(clone);

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

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

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