Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
web component v1 notes
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.