Open Source DOM Component

Newton

Standing on the shoulders of giants

In the wild

To see an example of this component in use, visit the Compleat Botanica website. This component typically has no visible UI. To understand what's going on under the hood, use the browser's inspector to view the HTML source code and network activity, and follow along as you read this documentation.

Installation

Prerequisites

The rwt-newton DOM component works in any browser that supports modern W3C standards. Templates are written using BLUE PHRASE notation, which can be compiled into HTML using the free Read Write View desktop app. It has no other prerequisites. Distribution and installation are done with either NPM or via Github.

Download

Using the DOM component

After installation, you need to add two things to your HTML page to make use of it.

• Add a script tag to load the component's rwt-newton.js file:

<script src='/node_modules/rwt-newton/rwt-newton.js' type=module></script>             

• Add the component tag somewhere on the page, supplying four pieces of slotted text:

  1. span slot=h2 The h2 heading text (optional).
  2. span slot=h3 The h3 heading text (optional).
  3. span slot=dt A definition term.
  4. span slot=dd A definition description. This typically has an anchor tag with the external reference.

Here's an example:

<rwt-newton role=navigation>
    <span slot=h2>Giants</span>
    <span slot=h3>Isaac Newton</span>
    <span slot=dt>Famous quotes</span>
    <span slot=dd><a href='https://example.com/shoulders-of-giants.html'> If I Have Seen Further</a> Using the understanding gained by major thinkers who have gone before in order to make intellectual progress.</span>
</rwt-newton>

Customization

The reference area has limited customization. Only the background color may be customized. Supply a background color using the background attribute.

<rwt-newton role=navigation background='#777'>
    ...
</rwt-newton>

Life-cycle events

The component issues life-cycle events.

Reference

License

The rwt-newton DOM component is licensed under the MIT License.