HenrikJoreteg/index.html

## index.html
<html>
  <head>
    <style>
      body {
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 300;
        color: gray;
      }

      badass-list-thing {
        width: 200px;
        display: block;
        border: 1px solid purple;
      }
    </style>
  </head>
  <body>
    <badass-list-thing>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
    </badass-list-thing>
    <p>This works in pretty much all browsers other than IE without compiling...</p>
    <script>
      const run = () => {
        customElements.define('badass-list-thing', class extends HTMLElement {
          disconnectedCallback () {
            console.log('disconnected')
          }
          attributeChangedCallback () {
            console.log('attributeChangedCallback', arguments)
          }
          adoptedCallback () {
            console.log('adopted')
          }
          connectedCallback () {
            console.log('connected, do something!')
          }
        })
      }
      const ensureWebComponents = () => new Promise((resolve, reject) => {
        if (window.customElements) {
          return resolve()
        }
        function loadScript(src) {
          return new Promise(function(resolve, reject) {
            const script = document.createElement('script');
            script.src = src;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
          });
        }
        window.addEventListener('WebComponentsReady', resolve)
        loadScript('https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.12/webcomponents-loader.js')
          .catch(reject)
      })
      ensureWebComponents().then(run)
    </script>
  </body>
</html>
	<html>
	<head>
	<style>
	body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	color: gray;
	}

	badass-list-thing {
	width: 200px;
	display: block;
	border: 1px solid purple;
	}
	</style>
	</head>
	<body>
	<badass-list-thing>
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
	<div>Item 4</div>
	</badass-list-thing>
	<p>This works in pretty much all browsers other than IE without compiling...</p>
	<script>
	const run = () => {
	customElements.define('badass-list-thing', class extends HTMLElement {
	disconnectedCallback () {
	console.log('disconnected')
	}
	attributeChangedCallback () {
	console.log('attributeChangedCallback', arguments)
	}
	adoptedCallback () {
	console.log('adopted')
	}
	connectedCallback () {
	console.log('connected, do something!')
	}
	})
	}
	const ensureWebComponents = () => new Promise((resolve, reject) => {
	if (window.customElements) {
	return resolve()
	}
	function loadScript(src) {
	return new Promise(function(resolve, reject) {
	const script = document.createElement('script');
	script.src = src;
	script.onload = resolve;
	script.onerror = reject;
	document.head.appendChild(script);
	});
	}
	window.addEventListener('WebComponentsReady', resolve)
	loadScript('https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.12/webcomponents-loader.js')
	.catch(reject)
	})
	ensureWebComponents().then(run)
	</script>
	</body>
	</html>