feat(dom): allow plugins to modify element annotation

src/dom/htmlelement.spec.ts

@@ -131,6 +131,21 @@ describe("HtmlElement", () => {
 		});
 	});
 
+	describe("annotatedName", () => {
+		it("should use annotation if set", () => {
+			expect.assertions(1);
+			const node = new HtmlElement("my-element");
+			node.setAnnotation("my annotation");
+			expect(node.annotatedName).toEqual("my annotation");
+		});
+
+		it("should default to <tagName>", () => {
+			expect.assertions(1);
+			const node = new HtmlElement("my-element");
+			expect(node.annotatedName).toEqual("<my-element>");
+		});
+	});
+
 	it("rootNode()", () => {
 		const node = HtmlElement.rootNode(location);
 		expect(node.isRootElement()).toBeTruthy();

src/dom/htmlelement.ts

@@ -25,6 +25,7 @@ export class HtmlElement extends DOMNode {
 	public closed: NodeClosed;
 	protected readonly attr: { [key: string]: Attribute[] };
 	private metaElement: MetaElement;
+	private annotation: string | null;
 
 	public constructor(
 		tagName: string,
@@ -43,6 +44,7 @@ export class HtmlElement extends DOMNode {
 		this.closed = closed;
 		this.voidElement = meta ? meta.void : false;
 		this.depth = 0;
+		this.annotation = null;
 
 		if (parent) {
 			parent.childNodes.push(this);
@@ -93,6 +95,19 @@ export class HtmlElement extends DOMNode {
 		);
 	}
 
+	/**
+	 * Returns annotated name if set or defaults to `<tagName>`.
+	 *
+	 * E.g. `my-annotation` or `<div>`.
+	 */
+	public get annotatedName(): string {
+		if (this.annotation) {
+			return this.annotation;
+		} else {
+			return `<${this.tagName}>`;
+		}
+	}
+
 	/**
 	 * Similar to childNodes but only elements.
 	 */
@@ -200,6 +215,13 @@ export class HtmlElement extends DOMNode {
 		return this.metaElement;
 	}
 
+	/**
+	 * Set annotation for this element.
+	 */
+	public setAnnotation(text: string): void {
+		this.annotation = text;
+	}
+
 	public setAttribute(
 		key: string,
 		value: string | DynamicValue,