google_io_2018_polymer3.md

notes from Google IO 2018 polymer 3.0

youtube video

• custom element
• shadow root
• html imports
• polymer 3.0
  • use npm instead
    • translate import 'module' to import 'node_modules/module'
  • all major browser supports js modules: https://caniuse.com/#feat=es6-module
  • template engine: lit-html, js string literals and html template element
    • LitElement: https://github.com/Polymer/lit-element https://github.com/Polymer/lit-html
  • PWA
• beyond
  • CSS shadow parts: selector::part(name) => <div part='name'/>
  • custom elements scoping:

import { FancyButton } from 'fancy-button'
const myRegistry = new CustomElementRegistry();

myRegistry.define('fancy-button', FancyButton);
element.attatchShadow({mode: 'open', customElements: myRegistry});

• package map: <script type='packagemap' src='package-map.json'></script>:

{
  "path_prefix": "/node_modules",
  "packages": {
    "foo-modules": { "main": "foo-module.js" }
  }
}

• HTML module, import html in js
• template instantiation

new NodeTemplatePart().attach(div) // ?
let inst = template.createInstance();
this.shadowRoot.appendChild(instance)
inst.getParts()[0].setValue(text);
inst.commit();