DarkTree is a Shadow DOM polyfill, specifically targeting the DOM feature support present in UXP browsers such as Pale Moon.
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_Nativecontains the DOM original prototypes before Mixins were installedShadowRoot, the ShadowRoot classHTMLSlotElement, the prototype for slot Elements (only applied to a slot element after it is rendered once)__DT_Propertysome helpers for working with properties
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.
MutationObserverswill 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
:hostpseudoelement is available, but the:slottedselector is not. Element.querySelectorAllandElement.querySelectoract on the composed DOM, which might look unexpected.Element.childrenandNode.childNodesare Arrays if emulated and NodeList if the native functions are used.