How to integrate the baseline-status web component into Eleventy (Build Awesome) with per-page opt-in loading, Nunjucks shortcodes, and self-hosted scripts. Learn why Baseline provides clearer browser support signals than Can I Use for modern web features.

Always Twisted

A walkthrough of integrating the `<baseline-status>` web component into an Eleventy static site. The setup copies the component script from node_modules at build time (avoiding CDN dependency), uses a Nunjucks shortcode for clean authoring, and implements per-page opt-in via frontmatter flags so the ~50KB script only loads on articles that need it. Also explains why Baseline's three-state model (Limited, Newly, Widely Available) is more actionable than Can I Use for deciding whether to use modern web platform features.

Adding Baseline Status to My Eleventy Site