Are webcomponents working?

I’ve checked in the builder and demo and I cannot verify but the same component that is working perfect in react or vue is not working with webcomponents, nothing happens with props and the slot.

https://codesandbox.io/s/papanasi-webcomponents-27zsfr?file=/src/index.js

<pa-button variant="red">Test</pa-button>

original code:

/**
 * Usage:
 *
 *  <pa-button></pa-button>
 *
 */
export default class Button extends HTMLElement {
  constructor() {
    super();
    const self = this;

    this.state = {};
    this.props = {};

    // used to keep track of all nodes created by show/for
    this.nodesToDestroy = [];
    // batch updates
    this.pendingUpdate = false;

    if (undefined) {
      this.attachShadow({ mode: 'open' });
    }
  }

  destroyAnyNodes() {
    // destroy current view template refs before rendering again
    this.nodesToDestroy.forEach((el) => el.remove());
    this.nodesToDestroy = [];
  }

  get _root() {
    return this.shadowRoot || this;
  }

  connectedCallback() {
    this._root.innerHTML = `
      <button data-test1="1" data-name="button-1">
        <slot></slot>
      </button>
      <style></style>`;
    this.pendingUpdate = true;
    this.render();

    this.onMount();
    this.pendingUpdate = false;
    this.update();
  }

  onMount() {}

  onUpdate() {}

  update() {
    if (this.pendingUpdate === true) {
      return;
    }
    this.pendingUpdate = true;

    this.render();
    this.onUpdate();

    this.pendingUpdate = false;
  }

  render() {
    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
    this.destroyAnyNodes();
    this.updateBindings();
  }

  updateBindings() {
    this._root.querySelectorAll("[data-name='button-1']").forEach((el) => {
      el.className = `pa-button ${this.props.variant ? `pa-button--${this.props.variant}` : ''} `;
      if (el.props) {
        el.props.class = `pa-button ${this.props.variant ? `pa-button--${this.props.variant}` : ''} `;
        el.update();
      }
    });
  }
  renderTextNode(el, text) {
    const textNode = document.createTextNode(text);
    el.after(textNode);
    this.nodesToDestroy.push(el.nextSibling);
  }
}
customElements.get("pa-button") || customElements.define("pa-button", Button);

result:

Expected: To have “test” inside the button and “pa-button–red” in the classlist.

[PatrickJS]

no worries issues are welcomed. we didn’t document this so it’s our fault. I’ve been working on the webcomponent output so anything in that area I’ll address

[PatrickJS]

@CKGrafico can you make a new issue about this.

Attributes aren’t being converted to props on load

The way I’m using mitosis/webcomponents is having the whole app in it so I never actually ran into this issue haha