gengns · August 18, 2018 21:19
diff --git a/box.css b/box.css
 box-element > div {
  color: #555;
  background: #00BCD4;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
 }
diff --git a/box.js b/box.js
 class Box extends HTMLElement {
  constructor(text) {
    super()
    this.text = text
  }
  connectedCallback() {
    this.innerHTML = `<div>${this.text}</div>`
  }
 }
 customElements.define('box-element', Box)
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="box.css">
 </head>
 <body>
  <script src="box.js"></script>
  <script>
    const box = new Box(`I'm a box`)
    document.body.appendChild(box)
  </script>
 </body>
 </html>
	class Box extends HTMLElement {
	constructor(text) {
	super()
	this.text = text
	}
	connectedCallback() {
	this.innerHTML = `<div>${this.text}</div>`
	}
	}
	customElements.define('box-element', Box)
	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="box.css">
	</head>
	<body>
	<script src="box.js"></script>
	<script>
	const box = new Box(`I'm a box`)
	document.body.appendChild(box)
	</script>
	</body>
	</html>