Skip to content

Instantly share code, notes, and snippets.

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 and
for Polymer 2 samples of highlight selected row, hover over rows
<dom-module id="grid-styles" theme-for="vaadin-grid">
[part~="row"][selected] [part~="body-cell"] {
background: red;
[part~="row"]:hover [part~="body-cell"] {
background: orange;
~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
high-level moving from native web components to polymer 2
~Sept 2017
'use strict';
/* missing... */
HTMLElement.prototype.controller = function(newValue){
var controller = newValue || this.getAttribute('controller') || 'function(){}';
this.controller = (new Function('return '+controller))();
generic instance-specific controllers
<any-html controller="window.function"></any-html>
class AnyHTML{
static get observedAttributes() { return ['controller']; }
attributeChangedCallback(name, oldValue, newValue, namespaceURI) {
case 'controller':
customElements.define('any-html', AnyHTML);
String.prototype.escapeRegExp = function(){
return this.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
Object.defineProperty(Event.prototype, 'path', {
// for Safari
var value = [], $0 =, $1;
$0 = $0.parentNode;
$0 = value[value.length - 1];
// if last item is a document, include its window
$0 = $0.defaultView;
if($0) value.push($0);
return value;
,set: function(){ }
~April 2017
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
(and possibly a library in others)
not working in v1 (ignore in any docs, I've only tried this in Chrome, not Safari):
<tag is="something-custom">
customElements.define('something-custom', SomethingCustom, {extends: 'tag'});
class SomethingCustom extends HTMLTagElement{
super(); // this throws an Illegal ... error like `new HTMLSelectElement()`
mostly referencing:
<a href="">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.