A small DOM implementation.
npm install @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.
``js
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 = "hello world"
el.outerHTML;
//
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:
sh
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>
[DOM]: https://dom.spec.whatwg.org/
[Web Components]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
[
]: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
[Event]: https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
[EventTarget]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
[DocumentFragment]: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
[customElements]: https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements
[setAttributeNS]: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeNS
[attachShadow]: https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
[ShadowRoot]: https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
[Shadow DOM]: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
[declarative Shadom DOM]: https://web.dev/declarative-shadow-dom/#building
[getInnerHTML]: https://web.dev/declarative-shadow-dom/#serialization
[content]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content
[adoptedStyleSheets]: https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets
[CSSStylesheet`]: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet