JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<main></main>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

.error {
    color: #d00;
    font-family: monospace;
}

JavaScript

var proto = Object.create( HTMLElement.prototype );
proto.createdCallback = function () {
    var url = this.getAttribute( 'url' );
    console.log( 'url', url );
    this.socket = new WebSocket( url );
    
    this.socket.onmessage = function ( event ) {
        console.log( 'message received: ' + event.data );
    });
    
    this.socket.send( 'test message' );
    
    // some code goes here...
};

document.registerElement( 'x-socket', {
    prototype: proto
});

var main = document.querySelector( 'main' );

main.innerHTML = '<x-socket url="ws://echo.websocket.org/"></xsocket>';