ltfill

ltfill lets you use the speculative lt element in HTML.

The lt element would allow web authors to provide titles or captions to lists.

<ul>
  <lt>Important Seussian Characters</lt>
  <li>Thing One</li>
  <li>The Cat in the Hat</li>
  <li>The Lorax</li>
  <li>Sally</li>
</ul>

<ol>
  <lt>Days of the week</lt>
  <li>Monday</li>
  <li>Tuesday</li>
  <li>Wednesday</li>
  <li>Thursday</li>
  <li>Friday</li>
  <li>Saturday</li>
  <li>Sunday</li>
</ol>

<dl>
  <lt>A few important web technologies</lt>
  <dt>HTML</dt>
  <dd>HTML is the markup language used to give content structure.</dd>
  <dt>CSS</dt>
  <dd>CSS is the language used to add a creative layer on top of HTML.</dd>
</dl>

Try it right now using CodePen

ltfill is a speculative polyfill which emulates a proposed feature of the web platform. Therefore, it should only be used in real production situations as x-lt and not lt, as the later would otherwise risk creating problems for the development of the Web if it became widely used prior to standardization and implementation.

Usage

Add ltfill to your build tool:

npm install ltfill --save-dev

Import ltfill as a resource.

import ltfill from 'ltfill';

observe

The observe method watches list title elements.

ltfill.observe(
  document.documentElement, // where list titles will be observed
  'x-h' // tag name of list titles
);

The observe method will assign a unique id to the list title, if it does not already have one. It will then assign an aria-labelledby to the list title’s parent, if it does not already have one, referencing the list title.

Example:

<ol aria-labelledby="__ltfill0">
  <x-lt id="__ltfill0">Days of the week</x-lt>
  <li>Monday</li>
  <li>Tuesday</li>
  <li>Wednesday</li>
  <li>Thursday</li>
  <li>Friday</li>
  <li>Saturday</li>
  <li>Sunday</li>
</ol>

style

The style method adds styles for list title elements.

ltfill.style(
  document.head, // where <style> will be appended
  'x-lt', // tag name of list titles
  'font-style:italic' // optional styles (otherwise display:block;font-weight:bold)
);

Example:

<style id="ltfill-style">x-lt{display:block;font-weight:bold}</style>