diff --git a/README.md b/README.md index 95acacc..637ee37 100644 --- a/README.md +++ b/README.md @@ -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) \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..887dfef --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + + +

WebComponents workshop

+

In this workshop, we will create new custom HTML Components

+ + + + + + + + + \ No newline at end of file diff --git a/src/components/hello-world.js b/src/components/hello-world.js new file mode 100644 index 0000000..03bda32 --- /dev/null +++ b/src/components/hello-world.js @@ -0,0 +1,21 @@ +class HelloWorldElement extends HTMLElement { + + constructor(){ + super() + + this.innerHTML = `

Hello Meetup !

`; + } + + connectedCallback(){ + console.log("I'm here!"); + } + + disconnectedCallback(){ + console.log("I'm gone!"); + } + +} + + window.customElements.define( + 'hello-world', + HelloWorldElement); diff --git a/src/index.html b/src/index.html deleted file mode 100644 index b4bd85f..0000000 --- a/src/index.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - -

WebComponents workshop

- -

In this workshop, we will create new custom HTML Components and publish them online.

- - - - - - -