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

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

<template id="card-back">
    <style type='text/css'>
        :host {
            flex: 1;
            display: flex;
            border-color: inherit;
            background-color: inherit;
        }

        #outer{
            border-radius: 12px;
            border-color: inherit;
            margin: 9px;
            flex: 1;
            display: flex;
        }

        #inner {
            margin: 9px;
            border: 3px solid;
            border-color: inherit;
            border-radius: 12px;
            flex: 1;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        #icon {
            border: 12px solid;
            border-color: inherit;
            border-radius: 12px;
            width: 80px;
            height: 80px;
            box-sizing: content-box;
        }

        ::content > card-icon {
            height: 80px;
            width: 80px;
        }
    </style>


    <div id="outer">
        <div id="inner">
            <div id="icon">
                <content></content>
            </div>
        </div>
    </div>

</template>

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

        var proto = Object.create(HTMLElement.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>