Skip to content

Instantly share code, notes, and snippets.

@HenrikJoreteg
Created October 26, 2017 21:25
Show Gist options
  • Save HenrikJoreteg/ca63c7c1b901d86b5bd103869c017b87 to your computer and use it in GitHub Desktop.
Save HenrikJoreteg/ca63c7c1b901d86b5bd103869c017b87 to your computer and use it in GitHub Desktop.
WebComponent playground boilerplate (just edit and refresh)
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment