@prantlf/dom-lite

A small DOM implementation, where most of attributes and methods including [selectors] from elements and document are implemented.

This fork enhances the original project with a support for testing libraries manipulating DOM (JSX syntax, for example) and for testing Web Components:

• Recognise attributes without the equal sign. Assign an empty string as their value.
• Add the classList property.
• Add the Event class and the EventTarget support to Document and Element.
• Add the setAttributeNS method.
• Isolate the storage for attributes from the element instance to allow reflecting properties to attributes using getters and setters and inherit default values from ancestor element classes.
• Add the attachShadow method and the ShadowRoot class for the Shadow DOM capability.
• Support the declarative Shadom DOM.
• Add the experimental getInnerHTML method for Shadow DOM serialisation.
• Add the adoptedStyleSheets method and the CSSStylesheet class to support constructible stylesheets.
• Add the method setDOMFeatures to disable or enable features like the constructible stylesheets.
• Add the customElements object together with life-cycle members connectedCallback, disconnectedCallback, observedAttributes and attributeChangedCallback.
• Add the content property to the template element, utilise HTMLTemplateElement.
• Make DocumentFragment an EventTarget and including element getters.
• Expose a global module to set the exported objects to the global namespace.

Synopsis

var document = require("@prantlf/dom-lite").document;

var el = document.createElement("h1");
el.id = "123";
el.className = "large";

var fragment = document.createDocumentFragment();
var text1 = document.createTextNode("hello");
var text2 = document.createTextNode(" world");

fragment.appendChild(text1);
fragment.appendChild(text2);
el.appendChild(fragment);

el.innerHTML;
// hello world
el.innerHTML = "<b>hello world</b>"
el.outerHTML;
// <h1 id="123" class="large"><b>hello world</b></h1>
el.querySelectorAll("b");
// [ "<b>hello world</b>" ]

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Lint and test your code.

How to clone this repository, install development dependencies and run tests:

git clone https://github.com/prantlf/dom-lite.git
cd dom-lite
pnpm i # you can use npm or yarn too
npm test

Licence

Copyright (c) 2014-2021 Lauri Rooden <lauri@rooden.ee>
Copyright (c) 2021 Ferdinand Prantl <prantlf@gmail.com>