Table of Contents Web Component

…and another one. This little (zero CSS) web component has two modes: progressively enhance a hierarchy of server rendered <ol> or <ul> elements (or conveniently client render them for you if they don’t exist) to highlight which are currently visible in the viewport. I pulled this code out of the table-of-contents.webc component from the WebC Tugboat starter project for standalone use. Demo (…and in the sidebar of this website) Source code @zachleat/table-of-contents on npm You can configure a selector attribute to control the scope of the headings search. My site uses main :is(h2, h3) but the default is main :is(h2, h3, h4, h5, h6). Again, all styles for this component are application styles. There is no component CSS on this one. Installation npm install @zachleat/table-of-contents Some sample headings Heading 3a Heading 4 (via 3a) Heading 3b Heading 4 (via 3b) Heading 3c