martok/js-darktree
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
DarkTree is a Shadow DOM polyfill targeted at UXP browsers
25 commits 1 branch 0 tags 72 KiB
Find a file
Exact
Martok 3af38477bf dt: call correct native querySelector(All) for ShadowRoot
2022-12-28 20:33:25 +01:00
src dt: call correct native querySelector(All) for ShadowRoot 2022-12-28 20:33:25 +01:00
test dt: smaller fixes in DOM manipulation 2022-11-21 00:14:30 +01:00
.gitignore Initial commit 2022-12-01 22:09:30 +01:00
build.cmd build: track build script 2022-12-03 01:09:25 +01:00
LICENSE Initial commit 2022-12-01 22:09:30 +01:00
README.md doc: describe more things 2022-11-30 01:05:57 +01:00

README.md

DarkTree

DarkTree is a Shadow DOM polyfill, specifically targeting the DOM feature support present in UXP browsers such as Pale Moon.

Usage

Just include the script file before using any ShadowDOM feature. CustomElements (probably via polyfill such as the polymer one must be loaded beforehand:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@webcomponents/custom-elements/custom-elements.min.js"></script>
    <script src="darktree.js"></script>
  </head>

A few internals are exposed on window:

  • __DT_Native contains the DOM original prototypes before Mixins were installed
  • ShadowRoot, the ShadowRoot class
  • HTMLSlotElement, the prototype for slot Elements (only applied to a slot element after it is rendered once)
  • __DT_Property some helpers for working with properties

Quirks & Limitations

Installation of the mixins is delayed until the first call to attachShadow, so that DOM method performance is not degraded until actually needed.

Many details are implemented different from the Shadow DOM spec, but with the intent of creating the same rendered result.

  • MutationObservers will see a transparent view of the DOM.
  • Event retargeting is not implemented.
  • Composing/slotting is synchronous, so there is a performance impact.
  • CSS rewriting including the :host pseudoelement is available, but the :slotted selector is not.
  • Element.querySelectorAll and Element.querySelector act on the composed DOM, which might look unexpected.
  • Element.children and Node.childNodes are Arrays if emulated and NodeList if the native functions are used.