Include original HTML in Brick

[fnhipster]

Currently the original content of the HTML is removed and its children are added to an array in this.values

Some use cases may need this original HTML to get classNames or query differently.

1 - We should include the original DOM element to this.root

import { Brick } from '../../scripts/aem.js';

export default class Hero extends Brick {
  connectedCallback() {
    const image = this.root.querySelector('picture');
    const title = this.root.querySelector('h1');

    this.shadowRoot.querySelector('slot[name="picture"]').append(image);
    this.shadowRoot.querySelector('slot[name="title"]').append(title);
  }
}

2 - We should only add this.values to the Brick class when specified with the flag mapValues.

import { Brick } from '../../scripts/aem.js';

export default class SectionMetadata extends Brick {
  constructor() {
    super({ mapValues: true });
  }

  connectedCallback() {
    [...this.values].forEach(([key, value]) => {
      if (key.toLowerCase() === 'style') {
        this.parentElement.classList.add(value);
      } else {
        this.parentElement.dataset[key] = value;
      }
    });
  }
}