Web Components and the Shadow DOM

prestonso

Web Components, reusable collections of code that are encapsulated and self-contained, have seen remarkable attention but comparatively little adoption. The vision is decoupled markup and behavior, made possible by new ideas such as CSS scoping, custom elements, HTML import, and the shadow DOM, a linked tree that ties it all together. In this session we'll examine the current state of Web Components, particularly in light of the JavaScript renaissance, which has introduced many new abstract DOM paradigms. We'll look at practical examples and begin to engage an ongoing debate: What will Drupal's theme layer and markup in general look like in a web leveraging Web Components?

Here's what we'll talk about:

  • What are Web Components?
  • Browser support and polyfills
  • The role of the Shadow DOM
  • Getting started with the Shadow DOM
  • Custom elements and templates
  • HTML imports and CSS scoping
  • Client-side frameworks and Web Components
  • Drupal and Web Components

This session is intended for front-end developers, Drupal themers, and anyone interested in the future of markup and behavior in front-end development. Most of this functionality is available in the form of polyfills.

Register NOW

Session Track

Frontend

Experience Level

Intermediate

Drupal Version