JSFoo: round the year submissions

Submit talks on JavaScript and full stack engineering round the year

Web Components: What they are and How they work?

Submitted by Diwanshi Pandey (@diwanshipandey) on Thursday, 2 August 2018

Section: Full talk Technical level: Intermediate


Web Components — what are they, and how do they work? Imagine how much easier front-end web development would be if your HTML elements alone were powerful enough to build the client-side of a modern, dynamic web page. What if you could make your own custom elements and access a large, open-source community of ready-to-use components like buttons, toolbars, chat windows, maps and other common front-end features, saving you the trouble of having to build those elements yourself?


Introduction - 10 mins

  • What are Web Components?
  • Why do we need them?

Pillars of Web Components - 10 mins

  • Four Pillars - Custom elements, Shadow DOM, Templates, HTML imports
  • Where are they used and how you can use them?

Creating a Web Component using Angular 5 - 15 mins

  • A basic example of a component using angular 5

Customizing Web Components - 15 mins

  • Build upon the basic example and add some customizations
  • Input Output Components

Final Q&A - 10 mins


Laptop with angular cli installed on it

Speaker bio

Diwanshi is a Mozilla TechSpeaker and works for RedHat as a FullStack Developer. She talks about javascript, Privacy and Security over the web, open source. You can ask her about Angular, Typescript and Node js


Login with Twitter or Google to leave a comment