SlideShare a Scribd company logo
Component of Web Frontend
Component of Web Frontend
‣
‣
‣
‣
‣
‣
‣
?
Component of Web Frontend
‣
‣
‣
‣
‣
‣
!
?
Component of Web Frontend
📱 ☁
Component of Web Frontend
‣
‣
‣
‣
‣
‣
?
"
‣
‣
‣
?
Component of Web Frontend
Component of Web Frontend
‣
‣
‣
‣
‣
‣
‣
"
‣
‣
‣
‣
‣
‣
Component of Web Frontend
Component of Web Frontend
Component of Web Frontend
?
Component of Web Frontend
Component of Web Frontend
‣
‣
‣
‣
‣
‣
Component of Web Frontend
?
Component of Web Frontend
Component of Web Frontend
Component of Web Frontend
‣
‣
‣
‣
‣
‣
Component of Web Frontend
😅
‣
‣
‣
‣
‣
/* style.css */
.className {
color: green;
}
import styles from "./style.css";
element.innerHTML = `<input class="${styles.className}">`;
import jss from 'jss';
const styles = jss.createStyleSheet({
className: {
color: green
}
}).attach();
element.innerHTML = `<input class="${styles.className}">`;
‣
‣
‣
‣
‣
‣
<template>
<style> :host { display: inline-block; } </style>
<input type="checkbox">
</template>
<script>
class SwitchElement extends HTMLElement {
constructor() {
super();
const o = document.currentScript.ownerDocument;
const t = o.querySelector('template');
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(t.content.cloneNode(true));
}
}
customElements.define('switch-element', SwitchElement);
</script>
‣
‣
‣
‣
‣
‣
‣
‣ 👈
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
Component of Web Frontend
Component of Web Frontend
‣
‣
‣
‣
#
$
%
✨

More Related Content

Viewers also liked

約物アキを調整するjQueryプラグインを作ってみた
約物アキを調整するjQueryプラグインを作ってみた約物アキを調整するjQueryプラグインを作ってみた
約物アキを調整するjQueryプラグインを作ってみた
祐磨 堀
 
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたちService worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
Kinuko Yasuda
 
Introduction to Resource Hints
Introduction to Resource HintsIntroduction to Resource Hints
Introduction to Resource Hints
Shogo Sensui
 
kontainer-js
kontainer-jskontainer-js
kontainer-js
Kuu Miyazaki
 
JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6
Aayush Shrestha
 
150421 es6とかな話
150421 es6とかな話150421 es6とかな話
150421 es6とかな話
kotaro_hirayama
 
ES6 はじめました
ES6 はじめましたES6 はじめました
ES6 はじめました
Net Kanayan
 
ES6 - JavaCro 2016
ES6 - JavaCro 2016ES6 - JavaCro 2016
ES6 - JavaCro 2016
Nenad Pecanac
 
Getting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascriptGetting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascript
Mohd Saeed
 
Prototypeベース in JavaScript
Prototypeベース in JavaScriptPrototypeベース in JavaScript
Prototypeベース in JavaScript
Ryo Maruyama
 
FileReader and canvas and server silde
FileReader and canvas and server sildeFileReader and canvas and server silde
FileReader and canvas and server silde
Net Kanayan
 
JavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, PerformanceJavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, Performance
クラスメソッド株式会社
 
JavaScript.Next Returns
JavaScript.Next ReturnsJavaScript.Next Returns
JavaScript.Next Returns
dynamis
 
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろうGoogle App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
kenji4569
 
はじめてのWallaby.js
はじめてのWallaby.jsはじめてのWallaby.js
はじめてのWallaby.js
Shunta Saito
 
ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)
taskie
 
Startup JavaScript
Startup JavaScriptStartup JavaScript
Startup JavaScript
Akinari Tsugo
 
アニメーションの実装つらい話
アニメーションの実装つらい話アニメーションの実装つらい話
アニメーションの実装つらい話
kata shin
 
Nds meetup8 lt
Nds meetup8 ltNds meetup8 lt
Nds meetup8 lt
ushiboy
 

Viewers also liked (20)

約物アキを調整するjQueryプラグインを作ってみた
約物アキを調整するjQueryプラグインを作ってみた約物アキを調整するjQueryプラグインを作ってみた
約物アキを調整するjQueryプラグインを作ってみた
 
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたちService worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
 
Introduction to Resource Hints
Introduction to Resource HintsIntroduction to Resource Hints
Introduction to Resource Hints
 
kontainer-js
kontainer-jskontainer-js
kontainer-js
 
JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6
 
150421 es6とかな話
150421 es6とかな話150421 es6とかな話
150421 es6とかな話
 
ES6 はじめました
ES6 はじめましたES6 はじめました
ES6 はじめました
 
ES6 - JavaCro 2016
ES6 - JavaCro 2016ES6 - JavaCro 2016
ES6 - JavaCro 2016
 
Getting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascriptGetting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascript
 
Prototypeベース in JavaScript
Prototypeベース in JavaScriptPrototypeベース in JavaScript
Prototypeベース in JavaScript
 
FileReader and canvas and server silde
FileReader and canvas and server sildeFileReader and canvas and server silde
FileReader and canvas and server silde
 
JavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, PerformanceJavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, Performance
 
JavaScript.Next Returns
JavaScript.Next ReturnsJavaScript.Next Returns
JavaScript.Next Returns
 
jQuery勉強会#4
jQuery勉強会#4jQuery勉強会#4
jQuery勉強会#4
 
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろうGoogle App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
 
はじめてのWallaby.js
はじめてのWallaby.jsはじめてのWallaby.js
はじめてのWallaby.js
 
ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)
 
Startup JavaScript
Startup JavaScriptStartup JavaScript
Startup JavaScript
 
アニメーションの実装つらい話
アニメーションの実装つらい話アニメーションの実装つらい話
アニメーションの実装つらい話
 
Nds meetup8 lt
Nds meetup8 ltNds meetup8 lt
Nds meetup8 lt
 

More from Shogo Sensui

Web Standards Interop 2022
Web Standards Interop 2022Web Standards Interop 2022
Web Standards Interop 2022
Shogo Sensui
 
Introduction to Performance APIs
Introduction to Performance APIsIntroduction to Performance APIs
Introduction to Performance APIs
Shogo Sensui
 
Web Standards 2018
Web Standards 2018Web Standards 2018
Web Standards 2018
Shogo Sensui
 
The State of Web Components
The State of Web ComponentsThe State of Web Components
The State of Web Components
Shogo Sensui
 
Web フロントエンドの変遷とこれから
Web フロントエンドの変遷とこれからWeb フロントエンドの変遷とこれから
Web フロントエンドの変遷とこれから
Shogo Sensui
 
Web Components 2016 & Polymer v2
Web Components 2016 & Polymer v2Web Components 2016 & Polymer v2
Web Components 2016 & Polymer v2
Shogo Sensui
 
これからのJavaScriptの話
これからのJavaScriptの話これからのJavaScriptの話
これからのJavaScriptの話
Shogo Sensui
 
Introduction to Service Worker
Introduction to Service WorkerIntroduction to Service Worker
Introduction to Service Worker
Shogo Sensui
 
We should optimize images
We should optimize imagesWe should optimize images
We should optimize images
Shogo Sensui
 
Web Components changes Web Development
Web Components changes Web DevelopmentWeb Components changes Web Development
Web Components changes Web Development
Shogo Sensui
 
Re-think about Web Performance
Re-think about Web PerformanceRe-think about Web Performance
Re-think about Web Performance
Shogo Sensui
 
Browser Computing Structure
Browser Computing StructureBrowser Computing Structure
Browser Computing Structure
Shogo Sensui
 
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winterBrush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
Shogo Sensui
 
Brush up your Coding!
Brush up your Coding!Brush up your Coding!
Brush up your Coding!
Shogo Sensui
 
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.jsFunctional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
Shogo Sensui
 

More from Shogo Sensui (15)

Web Standards Interop 2022
Web Standards Interop 2022Web Standards Interop 2022
Web Standards Interop 2022
 
Introduction to Performance APIs
Introduction to Performance APIsIntroduction to Performance APIs
Introduction to Performance APIs
 
Web Standards 2018
Web Standards 2018Web Standards 2018
Web Standards 2018
 
The State of Web Components
The State of Web ComponentsThe State of Web Components
The State of Web Components
 
Web フロントエンドの変遷とこれから
Web フロントエンドの変遷とこれからWeb フロントエンドの変遷とこれから
Web フロントエンドの変遷とこれから
 
Web Components 2016 & Polymer v2
Web Components 2016 & Polymer v2Web Components 2016 & Polymer v2
Web Components 2016 & Polymer v2
 
これからのJavaScriptの話
これからのJavaScriptの話これからのJavaScriptの話
これからのJavaScriptの話
 
Introduction to Service Worker
Introduction to Service WorkerIntroduction to Service Worker
Introduction to Service Worker
 
We should optimize images
We should optimize imagesWe should optimize images
We should optimize images
 
Web Components changes Web Development
Web Components changes Web DevelopmentWeb Components changes Web Development
Web Components changes Web Development
 
Re-think about Web Performance
Re-think about Web PerformanceRe-think about Web Performance
Re-think about Web Performance
 
Browser Computing Structure
Browser Computing StructureBrowser Computing Structure
Browser Computing Structure
 
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winterBrush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
 
Brush up your Coding!
Brush up your Coding!Brush up your Coding!
Brush up your Coding!
 
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.jsFunctional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
 

Component of Web Frontend