Florida DrupalCamp Logo
Register Now!

Out of the Shadows & into the Light: making custom Web Components reusable, Front-end developer friendly, SEO friendly and Accessible

Theming, Design, & Usability 159 Intermediate Sat 1:00pm to 1:45pm (2/22/25)

Web Components are native browser implementations of of custom HTML elements that were first introduced in 2011, and are currently supported by all current major browsers.  They're a popular approach when there's a need for a micro component that can enhance usability, without having to resort to a heavy-handed framework like React.

Web Components are not without their gotchas, mainly surrounding the use of the Shadow DOM.  If not done correctly, you can create a Web Component that functions, but:

  • Cannot be styled effectively for the look and feel of the site in which it's implemented
  • Isn't SEO friendly
  • Introduces Accessibiity issues into your site

In this session we'll discuss the architectural premises of Web Components, and include some tips on effectively leveraging the power of the Shadow DOM to encapsulate functionality without compromising SEO or Accessibility, and driving your Front End developers insane.

About the Speaker

Lisa Ridley

Tech Team Lead, Customer Support at Vardot

Chattanooga TN

Lisa is a long-time member of the Drupal community, having first gotten involved with Drupal in 2010 as a front-end developer on a Drupal 6 to Drupal 7 migration and upgrade project for a non-profit out of Alexandria Virginia.  Prior to a career in web development, she was a health benefits consultant and project manager for several major employee benefits consulting firms, focused on designing and administering comprehensive employee benefits programs for Fortune 500 companies.

After working as a front-end developer for a few years, she made the transition to back-end development and site architecture, and eventually operating as a tech team lead and technical project manager for a digital agency out of Chicago Illinois, where she honed her development and Drupal chops as well as her DevOps expertise on crafting and maintaining continuous delivery pipelines for the development team.

In her capacity as a Developer / Tech Team Lead, she works with projects from their inception to their delivery to clients, which includes the design process.  She has worked with both the design and the development teams to facilitate an efficient, scalable design and development process that maximizes client value through efficient use of tools and processes for both the design team as well as the developer team.

Lisa holds several professional certifications, including Certified Scrum Master and Certified Scrum Product Owner certifications from the Scrum Alliance, has completed a Human Centered Design consultative program and most recently completed a FIGMA MasterClass certification.

She lives in Chattanooga TN with her pint-sized Yorkie companions, Sassy Britches and Daisy, and in her spare time loves SEC college football, college basketball and is a long-time NASCAR race fan.