KnockoutJS style in web component

by davorpeic

HTML

<script id="CardTemplate" type="text/html">
	    <div class="container">
		    <div class="title" data-bind="text: CardTitle"></div>
		    <div class="description" data-bind="text: CardDescription"></div>
	    </div>
</script>
    <div id="applyContainer" class="container">
    <cen-card params="{ cardTitle: 'Card title 1', cardDescription: 'Description card title 1' }"></cen-card>
    </div>

CSS

.container {
    margin: 50px;
    padding: 0px;
} 

cen-card.redCard .cen-card-container{
  background-color:red;
  border-radius: 10px;
  color: green;
  
}

JavaScript

function CardViewModel(params){
	"use strict"
	this.CardTitle = params.cardTitle;
	this.CardDescription = params.cardDescription;
}

function generateUIDNotMoreThan1million() {
    return ("0000" + (Math.random()*Math.pow(36,4) << 0).toString(36)).slice(-4)
}

function addNamespaceClass(templateName, namespace, prefix){
    var template = document.getElementById(templateName);
    var element = document.createElement('div');
    element.innerHTML = template.innerHTML.replace(/\n/, '').trim();
    recursiveClassNamespace(element, namespace, prefix);
    template.innerHTML = element.innerHTML;
}

function recursiveClassNamespace(element, prefix, prefixClassName) {
    if (element.nodeName == '#text') {
        return;
    }
    var children = element.childNodes;
    if (element.className.length > 0) {
        var jsClass = element.className.split(' ');
        var cc = [];
        for (var j = 0; j < jsClass.length; j++) {
            var clName = jsClass[j];
            if (clName == '') {
                continue;
            }
            cc.push(prefixClassName + '-' + clName + '-' + prefix);
            cc.push(prefixClassName + '-' + clName);
        }

        if (cc.length > 0) {
            element.className = cc.join(' ')
        }
    }
    for (var i = 0; i < children.length; i++) {
        recursiveClassNamespace(children[i], prefix, prefixClassName)
    }
}

function addStyleToBody(styles, namespace, prefix) {
    var head = document.head;
    var prop, attr, style = '';

    for (prop in styles) {
        var s = [];
        for (attr in styles[prop]) {
            s.push(attr + ':' + styles[prop][attr]);
        }
        style += '.' + prefix + '-' + prop + '-' + namespace + ' {' + s.join(';') + '}';
    }

    var elStyle = document.createElement('style');
    elStyle.innerHTML = style;

    head.appendChild(elStyle);
}
var shortguid = generateUIDNotMoreThan1million();
//replace classes is called here becouse if I do it inside createViewModel is...