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

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

<template id="card-front">
    <style>
        #card {
            /* Fill the whole area of the shadow root */
            width: 100%;
            height: 100%;
            /* Border */
            border: 2mm solid;
            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-container {
            padding:2mm;
            padding-top:1mm;
            border-radius: 2mm;
            margin-top:0px;
            background-color: white;
            border-color: inherit;
            display: flex;
            flex-direction: column;
            flex: 1;
            font-size: inherit;
        }

        #icon {
            width: 7mm;
            height: 7mm;
            background-repeat: no-repeat;
            background-size: contain;
            background-color: inherit;
            border-color: inherit;
        }

        #icon-container {
            position: absolute;
            right: -1mm;
            top: -1mm;
            border: 1mm solid;
            border-radius: 1mm;
            background-color: inherit;
            border-color: inherit;
        }

    </style>

    <div id="card">
        <div id="icon-container">
            <div id="icon"></div>
        </div>

        <content select="card-title"></content>

        <div id="content-container">
            <content select="card-contents"></content>
        </div>
    </div>

</template>

<script>
(function(window, document) {
  var elemName = 'card-front';
  var thatDoc = document;
  var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;
  var proto = Object.create(HTMLElement.prototype, {
    createdCallback: {
      value: function() {
        var template = thisDoc.getElementById(elemName);
        var clone = thatDoc.importNode(template.content, true);
        this.createShadowRoot().appendChild(clone);
      }
    },
    attachedCallback: {
        value: function () {
            var root = this.shadowRoot;
            var color = "black";
            for (var i = 0; i < this.attributes.length; i++) {
                var attribute = this.attributes[i];
                switch (attribute.name) {
                    case "color": color = attribute.value;
                }
            }

            var cardStyle = root.getElementById("card").style;
            cardStyle.color = color;
            cardStyle.backgroundColor = color;
            cardStyle.borderColor = color;
        }
    }
  });
  thatDoc.registerElement(elemName, {prototype: proto});
})(window, document);
</script>