A Practical Guide to Vanilla Web Components

Web Components are set to change how you build front-end web applications. This course teaches you how to use the Web Components specifications to create encapsulated and reusable UI components which can be used with almost any framework or library.
Course info
Rating
(34)
Level
Intermediate
Updated
Apr 11, 2017
Duration
2h 10m
Table of contents
Course Overview
Web Component Fundamentals
The Basic Anatomy of a Web Component
Creating a Star Rating Component
Creating a Configurable Slide out Menu Component
Styling Web Components
Production Ready Web Components
Description
Course info
Rating
(34)
Level
Intermediate
Updated
Apr 11, 2017
Duration
2h 10m
Description

Web Components represent a new way to develop reusable UI components that solve fundamental problems web developers face every day. In this course, A Practical Guide to Vanilla Web Components, you'll learn all about the Web Component specifications. First, you'll get an overview of the fundamentals of web components. Next, you'll explore the basic anatomy of a web component. Finally, you'll be shown how to use what you've learned so far by building two high quality vanilla Web Components. By the end of the course, you'll be able to write top quality encapsulated UI components which can be used in almost any front-end technology stack.

About the author
About the author

Leon Revill is a Google Developer Expert for web technologies, co-host on @TheWebPlatform Podcast, blogger, author and web architect specialising in JavaScript and Web Platform features.

More from the author
Building UIs with the Web Animations API
Beginner
2h 41m
27 Mar 2018
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello, and welcome to Pluralsight. I'm Leon Revill, web architect specializing in front-end technologies based around JavaScript. I am so excited to be able to deliver my course, A Practical Guide to Vanilla Web Components, to help you prepare for the future of web development. Web components solve fundamental problems that web developers have been putting up with since the dawn of the web. These problems include style encapsulation, reusability, interruptability, and the big one, framework lock-in. This course is for web developers who want to get ready for the next big shift in front-end web development. In the course, I'll introduce you to the web components specifications and their superpowers. We'll also create two high-quality web components which will demonstrate the specifications in detail. By the end of the course, you'll be able to write top quality encapsulated UI components which can be used in nearly any front-end technology stack. They'll be reusable, extensible, and themeable, and I'll also show you how to make them production-ready by preparing them for cross-platform use, including legacy browsers such as IE 11. Web components have been a long time coming to the web platform, and they're finally here. With libraries, frameworks, and even entire conferences dedicated to web components, now is the perfect time to dive deep into this exciting new technology to discover the possibilities they'll open for you and the applications you create.

The Basic Anatomy of a Web Component
Hi and welcome to the Basic Anatomy of a Web Component module in A Practical Guide To Vanilla Book component. In the Web Component Fundamentals module I walked you through all of the work component specifications to give you a solid understanding of how these individual technologies work. In this module, we'll bring all of them together to show you how to build the basic structure of a web component. More specifically, in this module you'll learn the two different methods for writing a component and why you would choose one method over the other. I'll introduce you to some best practices for creating custom elements for your components. Dome element and tributes are a large part of the work component ecosystem, so we will look at how best to handle them. We'll look at how to define and use properties of a work component and finally, I'll show you how to use the Shadow Dom with your components. Before you start writing web components, you'll first need to decide how you want to write them. There are currently two common methods, each of which have their own advantages or disadvantages which is what we're going to cover now.