JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/WebReflection/document-register-element/master/build/document-register-element.js"></script>
<script>
(function(global){
if (!document.register) document.register = document.registerElement
var customElements = {},
create = Object.create || function(proto){
var f = function(){}
f.prototype = proto
return new f()
},
has = (has = Object.prototype.hasOwnProperty, has.call.bind(has)),
nop = function(){},
collect = function(from, collected){
if (document.querySelectorAll) return document.querySelectorAll('[data-id]', from)
collected = collected || []
if ('getAttribute' in from && from.getAttribute('data-id')){
collected.push(from)
}
for (var i = 0, max = from.children.length; i<max; i++){
collect(from.children[i], collected)
}
return collected
}
document.register.tag = function(name, options){
options = options || {}
if (!customElements[name]){
customElements[name] = {
options: options
}
return;
}
var xtends = customElements[name].xtends,
ctor = customElements[name].ctor,
getProto = Object.getPrototypeOf || function(o){ return o.__proto__ || o.constructor.prototype },
proto = xtends? create(getProto(document.createElement(xtends))) : create(HTMLElement.prototype),
created = options.created || nop,
ready = options.ready || nop,
onAttributeChange = options.attributeChangedCallback || nop,
attributes = customElements[name].attributes.split(' '),
template = customElements[name].content,
descriptor = function(attribute){
return {
enumerable: true,
get: function(){
return this.getAttribute(attribute)
},
set: function(value){
this.setAttribute(attribute, value)
}
...