…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 a demo in the sidebar of this blog post on my website.
- And a server rendered demo on Blog Awesome, e.g. Font Awesome 7.3 Is Here!
- Source code
@zachleat/table-of-contentson 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