jlengrand/web-components-workshop-deprecated
1
0
Fork 0
mirror of https://github.com/jlengrand/web-components-workshop-deprecated.git synced 2026-03-10 08:51:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Creates first custom element

Browse Source 
Also updates README
This commit is contained in:
Julien Lengrand-Lambert
2017-11-22 17:38:23 +01:00
parent c2ef1f08b6
commit 4ac8d920d6
4 changed files with 48 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -1,5 +1,7 @@
# Introduction to Web Components
This repo was created to support [a workshop](https://www.meetup.com/Coffee-Code-and-Chat/events/244822183/) given in Utrecht in November 2017.
## Slides and Work Material
https://docs.google.com/document/d/1nUVRp7ehON0bMOlSowUZLbOZmS_OjUepsuIATImniS8/edit?usp=sharing
[Slides are here](https://docs.google.com/presentation/d/1h_wp7a_xbjJxeNLu6_Dd8Q4fBy2zA6jc1AjZrNqSEjo/edit?usp=sharing)

24
index.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>WebComponents workshop</h1>
<p>In this workshop, we will create new custom HTML Components</p>
<hello-world></hello-world>
<button onclick="removeHelloWorld()">Click me</button>
<script src="src/components/hello-world.js"></script>
<script>
function removeHelloWorld(){
console.log("Called!");
const helloElement = document.getElementsByTagName("hello-world")[0];
helloElement.parentNode.removeChild(helloElement);
}
</script>
</body>
</html>

21
src/components/hello-world.js Normal file
View File

@@ -0,0 +1,21 @@
class HelloWorldElement extends HTMLElement {
constructor(){
super()
this.innerHTML = `<h1>Hello Meetup !</h1>`;
}
connectedCallback(){
console.log("I'm here!");
}
disconnectedCallback(){
console.log("I'm gone!");
}
}
window.customElements.define(
'hello-world',
HelloWorldElement);

30
src/index.html
View File

@@ -1,30 +0,0 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>WebComponents workshop</h1>
<p>In this workshop, we will create new custom HTML Components and publish them online.</p>
<meetup-button></meetup-button>
<script>
var newDrawer = document.createElement('app-drawer');
var button = document.createElement('button');
button.innerHTML = "A simple button";
button.setAttribute("style", "background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);");
button.style.padding = "30px";
button.style.backgroundImage
newDrawer.appendChild(button);
document.body.appendChild(newDrawer);
document.querySelector('button').addEventListener('click', function() {
console.log("Button clicked");
});
</script>
</body>
</html>