702: Lit-HTML, Implied Target for Popover, and Website Builders

February 16, 2026

49 min episode · 2 min read

Chris Coyier

Episode

49 min

Read time

2 min

AI-Generated Summary

Published Feb 17, 2026

Key Takeaways

✓Lit-HTML Atomic Updates: Lit-html performs surgical DOM updates using comment markers to track changes, updating only the specific text node that changed rather than re-rendering entire component trees. This approach delivers performance advantages over React's broader re-rendering patterns, making it valuable for web component development where granular updates matter for speed and efficiency.
✓CSS Anchor Positioning Shortcuts: The popover API includes an implied anchor relationship between buttons and their target popovers, eliminating the need to explicitly declare position-anchor in CSS. Combined with anchor-scope property to contain anchor names within parent elements, developers can avoid generating unique IDs for each menu-button pair, reducing code complexity significantly in component systems.
✓Safari Testing Limitations: Testing older Safari versions on non-Mac platforms remains difficult without Apple-provided virtual machines. Xcode includes free iOS simulators for Mac users going back several versions, but no official solution exists for Linux or Windows developers. Third-party tools like BrowserStack offer alternatives but come with cost and performance tradeoffs for cross-platform testing workflows.
✓CMS Selection Matrix: Choose static site generators like Eleventy for set-and-forget sites with rare updates, visual builders like Webflow for clients demanding high customization control, and robust CMSs like Craft or WordPress for content-heavy sites with 40-plus daily article publications. Match the tool to update frequency and whether users need form-based data entry or pixel-level design control.
✓Web Component Scope Management: Using anchor-scope on web component containers prevents anchor name collisions when multiple instances exist on the same page. This eliminates the need for unique ID generation across component instances, allowing developers to use consistent naming like menu-button throughout while maintaining proper isolation between separate component instances through DOM-based scoping.

What It Covers

Chris and Dave explore modern web component development with lit-html, discuss CSS anchor positioning's implied target feature and anchor scope property, debate Safari testing challenges across platforms, and evaluate website builder tools like Webflow and Craft CMS for different client needs and content management workflows.

Key Questions Answered

•Lit-HTML Atomic Updates: Lit-html performs surgical DOM updates using comment markers to track changes, updating only the specific text node that changed rather than re-rendering entire component trees. This approach delivers performance advantages over React's broader re-rendering patterns, making it valuable for web component development where granular updates matter for speed and efficiency.
•CSS Anchor Positioning Shortcuts: The popover API includes an implied anchor relationship between buttons and their target popovers, eliminating the need to explicitly declare position-anchor in CSS. Combined with anchor-scope property to contain anchor names within parent elements, developers can avoid generating unique IDs for each menu-button pair, reducing code complexity significantly in component systems.
•Safari Testing Limitations: Testing older Safari versions on non-Mac platforms remains difficult without Apple-provided virtual machines. Xcode includes free iOS simulators for Mac users going back several versions, but no official solution exists for Linux or Windows developers. Third-party tools like BrowserStack offer alternatives but come with cost and performance tradeoffs for cross-platform testing workflows.
•CMS Selection Matrix: Choose static site generators like Eleventy for set-and-forget sites with rare updates, visual builders like Webflow for clients demanding high customization control, and robust CMSs like Craft or WordPress for content-heavy sites with 40-plus daily article publications. Match the tool to update frequency and whether users need form-based data entry or pixel-level design control.
•Web Component Scope Management: Using anchor-scope on web component containers prevents anchor name collisions when multiple instances exist on the same page. This eliminates the need for unique ID generation across component instances, allowing developers to use consistent naming like menu-button throughout while maintaining proper isolation between separate component instances through DOM-based scoping.

Notable Moment

Chris realizes being sick adds tasks rather than removing them, as self-employment means work responsibilities never disappear. The stress of third-party expectations continues while managing illness symptoms and DoorDashing medicine, creating a compounding burden rather than the simple couch-rest scenario he previously believed made him exceptional at handling sickness.

Know someone who'd find this useful?