web component v1 notes

webcomponents.html

web components v1 (not v0)

~July 2018
various npm installed components which use named imports like `import "@name"`;
instead of a build tool or service just do a one-time conversion when updating for predictability and simplicity using standard stuff:
cd node_modules && cp -R @polymer @webcomponents @vaadin lit-html pwa-helpers ../modules/
cd ../modules/ && rm -f `find . -iname '*.map'` && rm -f `find . -iname '*.ts'`
find . -type f -name '*.js' -print0 | xargs -0 perl -plwe 's/([\\"\\'"'"'])(\@(?:polymer|webcomponents|lit-html|lit-element|vaadin\/))/$1\/modules\/$2/g' -i


this includes copy+paste from various *other* people/places (esp https://gitter.im/vaadin/web-components and https://polymer.slack.com/)
```
for Polymer 2 samples of highlight selected row, hover over rows
https://jsfiddle.net/6r5htd05/294/
<dom-module id="grid-styles" theme-for="vaadin-grid">
  <template>
    <style>
      [part~="row"][selected] [part~="body-cell"] {
        background: red;
      }

      [part~="row"]:hover [part~="body-cell"] {
        background: orange;
      }
    </style>
  </template>
</dom-module>
```

~May 2018
polymer 3 is out (May 10)
For anyone having difficulty with imports and building from node_modules I suggest using the following 
one-liner to fix all the import paths, to be run within the `node_modules` directory: 
`find ./@vaadin ./@polymer ./@webcomponents -type f -print0 | xargs -0 perl -plwe 's/([\\"\\'"'"'])(\@(?:polymer|webcomponents|vaadin\/))/$1\/node_modules\/$2/g' -i`

This runs for a few seconds and then your http server can serve all the modules directly from where they're installed. 
The script and be a postinstall step anytime there's an update. I had numerous problems with the build step (and rollup) 
and didn't feel a need to bother writing this into my http server at runtime since these are all static assets.

~Apr 2018
starting point/primer
https://developers.google.com/web/fundamentals/web-components/

high-level moving from native web components to polymer 2
https://www.youtube.com/watch?v=sK1ODp0nDbM



~Sept 2017
'use strict';
/* missing... */
HTMLElement.prototype.controller = function(newValue){
	var controller = newValue || this.getAttribute('controller') || 'function(){}';
	this.controller = (new Function('return '+controller))();
	this.controller();
}
/*
generic instance-specific controllers
<any-html controller="window.function"></any-html>
class AnyHTML{
	...
	static get observedAttributes() { return ['controller']; }
	attributeChangedCallback(name, oldValue, newValue, namespaceURI) {
		switch(name){
		case 'controller':
			this.controller(newValue);
		break;
		default:
		};
	}
}
customElements.define('any-html', AnyHTML);

*/

String.prototype.escapeRegExp = function(){
  return this.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
};
if(!Event.prototype.hasOwnProperty('path')){
Object.defineProperty(Event.prototype, 'path', {
// for Safari
	get:function(){ 
		var value = [], $0 = this.target, $1;
		while($0){
			value.push($0);
			$0 = $0.parentNode;
		};
		$0 = value[value.length - 1];
		// if last item is a document, include its window
		if($0){
			$0 = $0.defaultView;
			if($0) value.push($0);
		};
		return value;
	}
	,set: function(){ }
})
};


###

~April 2017
notes

is a combination of:
custom elements <any-thing></any-thing>
html templates <template></template>
shadow dom <script>(in constructor) var shadowRoot = this.attachShadow({mode: 'open'});</script>
(and arguably html imports which Google will and others apparently won't support)

is supported by:
safari 10.1/10.3 macOS + iOS April 2017
chrome-current
(and possibly a library in others)
http://caniuse.com/#feat=custom-elementsv1
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/?q=web%20component
https://webkit.org/status/#specification-web-components
https://www.chromestatus.com/features#web%20components
https://platform-status.mozilla.org/

not working in v1 (ignore in any docs, I've only tried this in Chrome, not Safari):
<tag is="something-custom">
<script>
customElements.define('something-custom', SomethingCustom, {extends: 'tag'});
class SomethingCustom extends HTMLTagElement{
	constructor(){
		super(); // this throws an Illegal ... error like `new HTMLSelectElement()`
}};
</script>
* https://bugs.chromium.org/p/chromium/issues/detail?id=652579
https://bugs.chromium.org/p/chromium/issues/detail?id=618606
https://bugs.chromium.org/p/chromium/issues/detail?id=619062
https://lists.w3.org/Archives/Public/public-webapps/2015AprJun/thread.html#msg515
	
mostly referencing:
<a href="https://developers.google.com/web/fundamentals/getting-started/primers/customelements">Google Developer docs</a>
it's innacurate as noted in the not working section above