Upgrade to Pro — share decks privately, control downloads, hide ads and more …

I/O ‘18で発表された
Polymer の update に見る Web Components の 過去/現在、そして未来/Jsfes-2018-summer

I/O ‘18で発表された
Polymer の update に見る Web Components の 過去/現在、そして未来/Jsfes-2018-summer

I/O ‘18で発表された
Polymer の発表を5分のLTに圧縮して紹介します

Kenichiro Kishida

May 19, 2018

More Decks by Kenichiro Kishida

Other Decks in Technology


  1. <iron-ajax auto url="https://www.googleapis.com/youtube/v3/search" params='{"part":"snippet", "q":"polymer", "key": "xxxx", "type": "video"}' handle-as="json"

    last-response="{{ajaxResponse}}"></iron-ajax> <template is="dom-repeat" items="[[ajaxResponse.items]]"> <div class="horizontal-section"> <h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2> <iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image> <p>[[item.snippet.description]]</p> </div> </template> https://github.com/PolymerElements/iron-ajax
  2. -JU&MFNFOU w 1PMZNFSϕʔεͷ௒ ܰྔ$VTUPN&MFNFOU ϕʔεΫϥε w IUUQTHJUIVCDPN 1PMZNFSMJUFMFNFOU <script src="node_modules/@webcomponents/webcomponents-bundle.js"></script>

    <script type="module"> import {LitElement, html} from '@polymer/lit-element'; class MyElement extends LitElement { static get properties() { return { mood: String }} _render({mood}) { return html`<style> .mood { color: green; } </style> Web Components are <span class="mood">${mood}</span>!`; } } customElements.define('my-element', MyElement); </script> <my-element mood="happy"></my-element>
  3. Polymer Versions • v1.11.0 • v2.2.0 • v3 (Preview) •

 releases • v1.11.3 • v2.6.0 • v3.0.2 • 140
 releases ▶︎ Up