web components vaadin 10 }> java - 2018.javacro.hr · web components four html5 specifications...
TRANSCRIPT
![Page 1: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/1.jpg)
Vaadin 10
Web Components }> JavaHaijian Wang
@haijian_wang
![Page 2: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/2.jpg)
![Page 3: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/3.jpg)
Web Components
FOUR HTML5 SPECIFICATIONS
1. Custom Elements
2. Templates
3. HTML imports (ES6 modules)
4. Shadow DOM
![Page 4: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/4.jpg)
Custom Elements
<my-new-element></my-new-element>
![Page 5: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/5.jpg)
<input type="date">
![Page 6: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/6.jpg)
<vaadin-date-picker></vaadin-date-picker>
![Page 7: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/7.jpg)
Templates
<template id=“my-template"> <style> ... </style> <div> <h1>Web Components</h1> <img src="/img/logo.svg"> </div> </template>
![Page 8: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/8.jpg)
HTML Imports
<link rel="import" href="my-el.html">
![Page 9: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/9.jpg)
SHADOW DOM
![Page 10: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/10.jpg)
<video src=“video-src.mp4” controls></video>
![Page 11: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/11.jpg)
<video src=“video-src.mp4” controls></video>
![Page 12: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/12.jpg)
<video src=“video-src.mp4” controls></video>
![Page 13: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/13.jpg)
• Encapsulation
• Reusability
Benefits of using Web Components
![Page 14: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/14.jpg)
![Page 15: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/15.jpg)
![Page 16: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/16.jpg)
![Page 17: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/17.jpg)
![Page 18: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/18.jpg)
![Page 19: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/19.jpg)
![Page 20: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/20.jpg)
Install an element
bower install --save vaadin/vaadin-date-picker
![Page 21: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/21.jpg)
Import an element
<link rel="import"
href="bower_components/vaadin-date-picker/vaadin-date-picker.html">
![Page 22: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/22.jpg)
<vaadin-date-picker></vaadin-date-picker>
![Page 23: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/23.jpg)
![Page 24: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/24.jpg)
Grid Combo Box
![Page 25: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/25.jpg)
Date Picker Upload
![Page 26: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/26.jpg)
Spread Sheet Charts
![Page 27: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/27.jpg)
And Many More …
![Page 28: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/28.jpg)
What about me?
![Page 29: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/29.jpg)
![Page 30: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/30.jpg)
public class MainView extends VerticalLayout {
public MainView() { add(new DatePicker()); }}
![Page 31: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/31.jpg)
![Page 32: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/32.jpg)
<game-card symbol=”♦” rank=”k”></game-card>
![Page 33: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/33.jpg)
![Page 34: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/34.jpg)
<dependency> <groupId>org.webjars.bower</groupId> <artifactId>github-com-vpusher-game-card</artifactId> <version>1.0.6</version></dependency>
![Page 35: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/35.jpg)
![Page 36: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/36.jpg)
![Page 37: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/37.jpg)
@Tag("game-card")@HtmlImport("bower_components/game-card/game-card.html")public class GameCardTemplate extends Component{}
![Page 38: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/38.jpg)
![Page 39: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/39.jpg)
public MainView() { GameCardTemplate gameCard = new GameCardTemplate(); gameCard.getElement().setAttribute("symbol", "♦"); gameCard.getElement().setAttribute("rank", "k"); add(gameCard);}
![Page 40: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/40.jpg)
![Page 41: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/41.jpg)
@Tag("game-card")@HtmlImport("bower_components/game-card/game-card.html")public class GameCardTemplate extends PolymerTemplate<GameCardModel>{ public GameCardTemplate(){
getModel().setRank("k"); getModel().setSymbol("♦");}
}
public interface GameCardModel extends TemplateModel { void setSymbol(String symbol); String getSymbol();
void setRank(String rank); String getRank();}
<game-card symbol=”[[symbol]]” rank=”[[rank]]”></game-card>
![Page 42: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/42.jpg)
![Page 43: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/43.jpg)
Make My Own Template?
![Page 44: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/44.jpg)
<hello-world></hello-world>
Hello World!
![Page 45: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/45.jpg)
Native Approach<template id="template1"> Hello world! </template> <script> customElements.define('hello-world', class extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({mode: 'open'}); const t = document.querySelector('#template1'); const instance = t.content.cloneNode(true); shadowRoot.appendChild(instance); } });</script>
![Page 46: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/46.jpg)
![Page 47: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/47.jpg)
Polymer<dom-module id="hello-world"> <template> Hello world! </template> <script> class HelloWorld extends Polymer.Element{ static get is() { return 'hello-world'; } }
customElements.define(HelloWorld.is, HelloWorld); </script> </dom-module>
![Page 48: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/48.jpg)
What about me?
![Page 49: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/49.jpg)
![Page 50: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/50.jpg)
![Page 51: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/51.jpg)
Designer is an IDE plugin
![Page 52: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/52.jpg)
![Page 53: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/53.jpg)
![Page 54: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/54.jpg)
![Page 55: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/55.jpg)
![Page 56: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/56.jpg)
![Page 57: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/57.jpg)
![Page 58: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/58.jpg)
![Page 59: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/59.jpg)
![Page 60: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/60.jpg)
@Tag("hello-world")@HtmlImport("frontend://Intro/Exercises/Solutions/hello-world.html")public class HelloWorld extends PolymerTemplate<HelloWorld.HelloWorldModel> {
public interface HelloWorldModel extends TemplateModel {
}}
![Page 61: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/61.jpg)
![Page 62: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/62.jpg)
![Page 63: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/63.jpg)
@Tag("hello-world")@HtmlImport("frontend://hello-world.html")public class HelloWorld extends PolymerTemplate<HelloWorld.HelloWorldModel> {
@Id("helloButton") private Button helloButton;
public interface HelloWorldModel extends TemplateModel {
}}
![Page 64: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/64.jpg)
@Tag("hello-world")@HtmlImport("frontend://hello-world.html")public class HelloWorld extends PolymerTemplate<HelloWorld.HelloWorldModel> {
@Id("helloButton") private Button helloButton;
public HelloWorld(){ helloButton.addClickListener(e->{ Notification.show("Hello"); }); }
public interface HelloWorldModel extends TemplateModel {
}}
![Page 65: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/65.jpg)
![Page 66: Web Components Vaadin 10 }> Java - 2018.javacro.hr · Web Components FOUR HTML5 SPECIFICATIONS 1. Custom Elements 2. Templates 3. HTML imports (ES6 modules) 4. Shadow DOM](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec65f197e974c37c34bb7cd/html5/thumbnails/66.jpg)