References

What is this?

This is an experimental pair of Web Components for citing and referencing sources in a wiki-like manner.

cite-web

To cite documents, the cite-web element is used:

<cite-web
  url="https://en.wikipedia.org/wiki/Wikipedia:Citing_sources"
  author="Wikipedia Collaborators"
  title="Wikipedia:Citing sources"
  publisher="Wikipedia"
  location="United States"
  date="2021-08-18"
  access-date="2021-08-31"></cite-web>

That generates the following inline citation: Citation IDs are automatically incremented. Multiple inline citations for the same reference can be made, by using the name attribute. First, declare it with the attribute:

<cite-web
  url="https://google.com"
  title="Google Search"
  ...
  name="google"></cite-web>

Then, to reuse that same citation, you only need the name attribute, and not any other:

<cite-web name="google"></cite-web>

That way, the IDs won't be incremented, and all citations will point to the same reference: declaration, reuse, reuse.

references-list

At the bottom of the document, the references-list element must be placed to generate the list; nothing is guaranteed to work properly if you use multiple references-list elements in the same page.

The shadow DOM, used by custom elements, doesn't inherit the page's style. To add custom styling to the cite-web and references-list elements, simply add a style or link tag inside the references-list element, with the attribute slot="style", like this:

<references-list>
  <link rel="stylesheet" href="./style.css" slot="style">
</references-list>

Have multiple styles? Not to worry. You can use a dummy span element with slot="style", and add your multiple styles there:

<references-list>
  <span slot="style">
    <link rel="stylesheet" href="./style.css">
    <style>a[href] { color: #0645ad; }</style>
  </span>
</references-list>

Styles placed inside references-list will be automatically cloned to all cite-web elements.

Demo

The Sun is hot.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.