Support plain JS or some declarative way for achieving what `JS.ignore_attributes/1` does

DaAnalyst · January 16, 2026, 12:50pm

So, we’re migrating away from AlpineJS to web components (Lit library) integration with LiveView and it’s been a very pleasant experience so far.

Having a relatively minor issue with how LiveView expects to mark ignored attributes though (via phx-mounted={JS.ignore_attributes([ ..])} because now I need to wrap each custom element into a Phoenix function component only to encapsulate this phx-mounted attribute, a wrapping that would be otherwise totally redundant.

Is there any chance there could be another method of achieving the same effect added (e.g. phx-ignore-attrs or a liveSocket api API call). I did try to invoke window.liveSocket.js().ignoreAttributes( el, [ 'foo', 'bar']) and it didn’t crash but unfortunately, it didn’t produce the desired result either.

Thanks

CLARIFICATION: the ignoreAttributes was done from custom element’s connectedCallback

LostKobrakai · January 16, 2026, 1:03pm

Does the element have a unique id? Otherwise it afaik will be replaced, not patched.

DaAnalyst · January 16, 2026, 1:07pm

Yes, it does.

steffend · January 16, 2026, 1:08pm

That should already work, but of course there may be a bug. If you have something to reproduce please open up an issue!

steffend · January 16, 2026, 1:09pm

In other words: liveSocket.js() / this.js() (in hooks) is the official API to do it from JavaScript.

DaAnalyst · January 16, 2026, 1:11pm

I’ll schedule it then. Btw, it simply does nothing (LiveView continues to overwrite the custom element’s property attributes).

DaAnalyst · January 16, 2026, 1:58pm

Ok.. so it’s not a bug because it works when invoked from the mounted() of a hook attached to the custom element, but then there’s still this redundancy - the custom element’s own JS + the hook’s JS + the phx-hook attribute.

Can it be made to work when called from outside of the hook too, like from connectedCallback which is already a standard for custom elements?

LostKobrakai · January 16, 2026, 2:18pm

If you control the webcomponents you can initialize a hook instance from within their js with createHook:

github.com/phoenixframework/phoenix_live_view

assets/js/phoenix_live_view/index.ts

2cf8cb195


      
          /** Creates a hook instance for the given element and callbacks.
           *
           * @param el - The element to associate with the hook.
           * @param callbacks - The list of hook callbacks, such as mounted,
           *   updated, destroyed, etc.
           *
           * *Note*: `createHook` must be called from the `connectedCallback` lifecycle
           * which is triggered after the element has been added to the DOM. If you try
           * to call `createHook` from the constructor, an error will be logged.
           *
           * @example
           *
           * class MyComponent extends HTMLElement {
           *   connectedCallback(){
           *     let onLiveViewMounted = () => this.hook.pushEvent(...))
           *     this.hook = createHook(this, {mounted: onLiveViewMounted})
           *   }
           * }
           *
           * @returns Returns the Hook instance for the custom element.

This file has been truncated. show original

github.com/phoenixframework/phoenix_live_view

assets/test/view_test.ts

2cf8cb195


      
          test("createHook", (done) => {
            const liveSocket = new LiveSocket("/live", Socket, {});
            const el = liveViewDOM();
            customElements.define(
              "custom-el",
              class extends HTMLElement {
                hook!: ViewHook;
                connectedCallback() {
                  this.hook = createHook(this, {
                    mounted: () => {
                      expect(this.hook.liveSocket).toBeTruthy();
                      done();
                    },
                  });
                  // Before mounting, accessing liveSocket throws (hook not yet attached to a live view)
                  expect(() => this.hook.liveSocket).toThrow();
                }
              },
            );
            const customEl = document.createElement("custom-el");

This file has been truncated. show original

DaAnalyst · January 16, 2026, 2:45pm

Thank you so much, you saved my day!

Nothing like a competent answer from a fellow human

DaAnalyst · January 19, 2026, 9:45am

Now that I’m using it, I wonder which one will prevail if the custom element user (still me, but forgetting doing this at a later point in time) declares a phx-hook for the custom element in the template where it’s being used?

I could console.warn or throw if the phx-hook attribute exist, but I’m still curious about the actual dynamics and whether it’s even smart to rely on it (given a possibility for the behavior to maybe change over time).

Again, asking because LLMs are not providing a 100% certainty answer.