Web Components and the Shadow DOM

prestonso

Web Components are reusable "widgets" of code that are encapsulated and self-contained. The Shadow DOM gives you the key to a second DOM tree that lies outside the first but remains linked. The result is markup and behavior that don't collide -- made possible by new ideas such as CSS scoping, custom elements, and HTML imports. In this session we'll examine the current state and the potential impact of Web Components on traditional websites. 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 componentized web?

Here's what we'll talk about:

  • Web Components as reusable "widgets"
  • The role of the Shadow DOM
  • Getting started with the Shadow DOM
  • Custom elements and templates
  • HTML imports
  • CSS scoping
  • Web Components, Twig, and Drupal

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

Register NOW

Session Track

Front End

Experience Level

Intermediate

Drupal Version