create new things and stuff

customelements.js

/* this last updated 2016 Dec 9

v1 available:
2016 Nov in WebKit, Safari Tech Preview
2016 Chrome 54

curious when this lands on ios/macos

Chrome devtools show shadow DOM by default
Safari devtools must enable it in elements by selecting the icon

misc
https://www.chromestatus.com/feature/4696261944934400
https://webkit.org/blog/7071/release-notes-for-safari-technology-preview-17/
https://webkit.org/blog/7027/introducing-custom-elements/
https://developer.apple.com/safari/technology-preview/release-notes/

primer
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements
https://developers.google.com/web/fundamentals/getting-started/primers/customelements
*/

class SpecialThing extends HTMLElement {
	constructor(){
		/*
* Don’t add, remove, mutate, or access any attribute inside a constructor 
* – Attributes don’t even exist during synchronous construction. 
* - Use attributeChangedCallback instead: the browser engine will invoke it for each and every attribute when parsing the HTML.
* Don’t insert, remove, mutate, or access a child 
* – Again, child nodes don’t even exist during synchronous construction. 
* - Use child nodes’ connectedCallback and communicate the information upwards.
		*/
		super();
		this.attachShadow({mode: 'open'}).innerHTML = `
<style>
:host{display:block;}
:host([needed-to-init='']){display:none;}
:host input{border-color:#aaa;}
::slotted(*){text-decoration:underline;cursor:pointer;}
</style>
<slot></slot>
<form autocorrect=off autocapitalize=off spellcheck=false autocomplete=off >
	<input type=text>
	<input type=range min=0 max=50 step=1 value=10>
	<textarea></textarea>
	<input type=submit>
</form>
		`;
		// another approach, non-shadow here
		this.appendChild( document.importNode( document.querySelector('template.special-thing').content, 1) );
	}
	static get observedAttributes(){ return ['url'] }
	connectedCallback(){
		// NOW children are available?
		console.log('connected',arguments.length, arguments, this);
	}
	disconnectedCallback(){
		console.log('disconnected',arguments.length, arguments, this);
	}
	attributeChangedCallback(name, old, val){
		console.warn(`^attr ${name}: "${old}" => "${val}"`);
		switch(name){
		case 'special-thing':
			if(!val) break;
				// TODO
		break;
		};
	}
	adoptedCallback(){
		console.log('adopted',arguments.length, arguments, this);
	}
}
customElements.define('special-thing', SpecialThing);
customElements.whenDefined('special-thing').then(function(special){ return special; });
customElements.get('special-thing');