Skip to content

Expose .addClass/.removeClass for HTMLElement? #26

Open
@ni-vo

Description

@ni-vo

I have been trying to inject a class name into a parsed HTMLElement and when I call rootNode.toString(), the class does not appear. Printing the element that gets fed into .exchangeChild does infact show the class, though.

Am I doing something wrong, or is there perhaps a workaround?

const targetElement = node as HTMLElement;
const parentElement = targetElement.parentNode as HTMLElement;

const component = createComponent(targetElement.tagName);

const renderedComponentHtml = minify(component.render(targetElement.attributes, targetElement.innerHTML));
const renderedElement = parse(renderedComponentHtml) as HTMLElement;

if (options.injectClass) {
	const childElement = renderedElement.childNodes[0] as HTMLElement;
	childElement.classNames = [targetElement.tagName];

	console.log(renderedElement.childNodes[0]);
}

parentElement.exchangeChild(targetElement, renderedElement);

Output:

   HTMLElement {
      childNodes:
       [ HTMLElement {
           childNodes: [Array],
           tagName: 'table',
           rawAttrs: 'class="table"',
           parentNode: [Circular],
           classNames: [Array],
           nodeType: 1 },
         HTMLElement {
           childNodes: [Array],
           tagName: 'div',
           rawAttrs: '',
           parentNode: [Circular],
           classNames: [],
           nodeType: 1 },
         HTMLElement {
           childNodes: [Array],
           tagName: 'table',
           rawAttrs: 'class="table"',
           parentNode: [Circular],
           classNames: [Array],
           nodeType: 1 } ],
      tagName: 'body',
      rawAttrs: '',
      parentNode: null,
      classNames: [ 'aur-base' ],
      nodeType: 1 }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions