JSFiddle - React, Tailwind, and code Playground

by Derek Anderson

JavaScript

//kind that extends enyo prototype to HTMLElement
enyo.kind({
    name: 'enyo.customElement',
    create: function(){
        var _this = this;
        this.customType = document.registerElement(_this.tag, {
          prototype: _this
        });
        this.instance = new this.customType();
        this.inherited(arguments);
    },
    render: function() {
        this.instance.outerHTML = this.generateHtml();
    },
    renderInto: function(target){
        target.innerHTML = '';
        target.appendChild(this.instance);
        this.instance.outerHTML = this.generateHtml();
        this.instance = document.getElementById(this.id);
    }
});

//test kind
enyo.kind({
    name: 'myTestElement',
    tag: 'my-test',
    kind: 'enyo.customElement',
    foo: function(content) {
        this.set('content', content);
    },
    content: 'default content'
});

//create a news test kind and render to body
var _myTestElement = new myTestElement();
_myTestElement.renderInto(document.body);

//get reference to DOM node
var _myTestElementNode = document.getElementById(_myTestElement.id);

//using the dom node to access content
_myTestElementNode.set('content', 'foo bar test');

//get the content from the DOM instance
console.log(_myTestElement.instance.get('content'));