Louie Perry

Louie Perry

1626755847

An Introduction to Frameworkless Web Components

Interested in web components but not frameworks? Learn what web components are and how to use them without the help of a JS framework.

This tutorial provides an introduction to standard web components written without using a JavaScript framework. You’ll learn what they are and how to adopt them for your own web projects. A reasonable knowledge of HTML5, CSS, and JavaScript is necessary.

  • What are Web Components?
  • How do Web Components Work?
  • Your First Web Component
  • Create a <word-count> Component
    • WordCount Constructor
    • Attach a Shadow DOM
    • Observing WordCount Attributes
    • WordCount Rendering
  • Uncovering the Shadow DOM
    • Scoped Styling
    • Overriding the Shadow Styles
    • Shadow DOM Events
    • Using HTML templates
    • Using Template Slots
    • The Declarative Shadow DOM
    • Inclusive Inputs
  • Are Web Components the Future?

#web-development #webdev #web-components #javascript

An Introduction to Frameworkless Web Components