be-based

be-based

be-based is a package that allows a DOM document fragment filled with relative URL paths, to be adjusted based on a base URL. This is quite critical when streaming HTML from a third-party element to a DOM node contained within the Live DOM tree. be-based plays a critical role in combination with be-written.

The syntax:

<div be-based="https://www.supremecourt.gov/about/">
    <a href="biographies.aspx#SOConnor">O'Connor, Sandra Day</a>
<div>

is shorthand for:

<div be-based='{
    "base": "https://www.supremecourt.gov/about/",
    "forAll": ["href", "src", "xlink:href"]
}'>
    <a href="biographies.aspx#SOConnor">O'Connor, Sandra Day</a>
</div>

be-based rewrites the attribute within:

<div is-based="https://www.supremecourt.gov/about/">
    <a href="https://www.supremecourt.gov/about/biographies.aspx#SOConnor">O'Connor, Sandra Day</a>
</div>

Side service -- Declarative Shadow DOM

be-based also takes it upon itself, in the absence of any apparent alternatives, to make the same Declarative Shadow DOM syntax that works when streaming HTML to the browser, to also work while streaming a separate HTML fetch request to a DOM element.

Side service -- Element Matching

Another service be-based provides is it can be subscribed to for any CSS matches it encounters. This feature is used by be-rewritten.

As a custom attribute / decorator / behavior

be-based is one of a growing family of be-decorated web component based custom attributes / behaviors / decorators / directives.

By referencing be-based.js, elements with attribute be-based will be discovered and transformed.

Or we can reference index.js, which loads both trPlugin.js (template instantiation plug-in) and be-based.js in parallel.

The element be-based can decorate is not limited to template elements. It can be applied to any DOM element.

If using stream-orator to stream HTML to a target element, be-based can be used to watch all new elements, and apply all the rules as they are discovered.

This seems to work quite well with Chromium based browsers running on windows (rewriting image url's before the browser tries the original, invalid url), but isn't so effective with Firefox.

Update: Well, on Chromium based browsers, it doesn't seem so reliable either, at least depending on when I try.

As a cloudflare HTMLRewriter Class [TODO]

As a service worker helper [TODO]

W3C willing.