Custom element attributes are lost on component re-render

[nickcluc]

Hi! We're looking into using Motion, and noticed an issue when we were trying to render a Trix editor inside a motion component.

We've noticed that when using a custom element, upon re-render of the component, attributes on that component are lost. You can see a simple example if you had an element which was initialized this way:

class FooBarElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const testElement = document.createElement('span');
    this.setAttribute('data-foo-bar', '123');
    this.shadowRoot.append(testElement);
  }
}

window.customElements.define('foo-bar', FooBarElement);

which is attached in a component:

.container
  %foo-bar{ data: { motion: 'click->update' } }

(with a component.rb file that has a mapped #update method)

Upon initial page load, the element looks like this:

<foo-bar data-motion="click->update" data-foo-bar="123"></foo-bar>

But after the element is clicked and the component is re-rendered:

<foo-bar data-motion="click->update"></foo-bar>

This is actually preventing us from being able to have a form with a rich text field using Actiontext/Trix editor since Trix uses custom elements to build the editor on render. We were wondering if there was a missing step to get custom elements working or if that is a limitation/issue with motion at this time. Thanks so much for taking a look!