JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<draggable-box></draggable-box>

CSS

draggable-box {
  display: block;
  
  min-height: 200px;
  min-width: 80px;
  border: solid 1px gray;
  background-color: gray;
}

JavaScript

const body = document.querySelector('body');
const canvasElement = document.createElement('canvas');
const canvas = body.appendChild(canvasElement);
const context = canvas.getContext('2d');

canvas.setAttribute('width', '100');
canvas.setAttribute('height', '100');
window.addEventListener('resize', () => {
	canvas.height = document.clientHeight;
  canvas.width = document.clientWidth;
});


class DraggableBox extends HTMLElement {
	constructor () {
  	super();
    this.attachShadow({mode: 'open'});
  }
  connectedCallback () {
		console.log('...', 'connected');
    const fragment = document.createDocumentFragment();
    const container = document.createElement('div');
    fragment.appendChild(container);
    container.innerHTML = `
<div>
  <div class="tile"></div>
  <div class="title-bar">Title</div>
  <div class="menu-bar">
  	<button>+</button>
  </div>
  <div class="body"></div>
</div>
    `;
    c
  }
}
customElements.define('draggable-box', DraggableBox);