Skip to content

Instantly share code, notes, and snippets.

View sumbad's full-sized avatar

sumbad

7 followers · 0 following
View GitHub Profile
@sumbad
sumbad / webcomponents-base__custom-elements_2.html
Last active July 3, 2017 15:43
<!DOCTYPE html>
<html>
<head>
<title>Custom Elements</title>
<script type="text/javascript">
class FirstCustomElement extends HTMLElement {
constructor() {
super();
console.log('constructor');
}
@sumbad
sumbad / webcomponents-base__custom-elements_3.html
Created July 3, 2017 15:56
<!DOCTYPE html>
<html>
<head>
<title>Custom Elements</title>
<script type="text/javascript">
class HelloCustomElement extends HTMLElement {
sayHello() {
console.log('Hello!');
}
}
@sumbad
sumbad / webcomponents-base__custom-elements_4.html
Created July 3, 2017 16:01
<!DOCTYPE html>
<html>
<head>
<title>Custom Elements</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.5.0/document-register-element.js"></script>
<script type="text/javascript">
class HelloInputCustomElement extends HTMLInputElement {
connectedCallback() {
this.setAttribute('value', 'Hello');
@sumbad
sumbad / webcomponents-base__shadow-dom_1.html
Created July 3, 2017 16:35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Shadow DOM</title>
<style>
input {
border-color: red;
margin: 10px;
@sumbad
sumbad / webcomponents-base__html-templates_1.html
Created July 3, 2017 16:53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML Templates</title>
</head>
<body>
<template id="task">
@sumbad
sumbad / webcomponents-base__html-imports_1.html
Created July 3, 2017 17:01
<!DOCTYPE html>
<html>
<body>
<h1>Hello Web Components!</h1>
</body>
</html>
@sumbad
sumbad / webcomponents-base__html-imports_2.html
Created July 3, 2017 17:02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Imports</title>
<link rel="import" href="hello.html" id="hello" />
</head>
<body>
@sumbad
sumbad / webcomponents-principles__1.html
Created August 3, 2017 10:32
<template>
<style>
h1 {
background-color: dimgray;
color: darkgray;
}
</style>
<h1>Use Web Components!</h1>
</template>
@sumbad
sumbad / webcomponents-principles__2.html
Created August 3, 2017 10:33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Imports</title>
<link rel="import" href="use.html" id="use" />
</head>
<body>
<use-web-components></use-web-components>
</body>
@sumbad
sumbad / webcomponents-principles__3.js
Created August 3, 2017 10:40
class UseWebComponents extends HTMLElement {
connectedCallback(){
this.innerHTML = `
<style>
h1 {
background-color: dimgray;
color: darkgray;
}
</style>
<h1>Use Web Components!</h1>