Referencing the host element in Vue v3 Custom Element components

Question

OK so I know a few variations on this question have been asked already, across the various versions and APIs of Vue... But I haven't been able to figure it out so here's the context as to why I think mine is different:

I'm trying to build some components which:

Are internally complex enough that building with Vue rather than just native web components is helpful, but...
Will run outside Vue context on the page (not in a Vue app), so are packaged as Web Components / Custom Elements from Vue, and...
Implement data inputs that will be used inside <form>s (again, not in Vue apps).

One challenge with this is that Vue Web Components use shadow DOM, and forms don't automatically traverse shadow roots to look for inputs: So making the form actually see and submit the components' inner data is not automatic.

It seems like there's some hope as detailed in this helpful blog post: A new ElementInternals API and element-internals-polyfill NPM package by which components can indicate data up to forms. Implementing a "form-associated custom element" requires setting a static readonly boolean property (easy enough) but also linking something like:

// (`this` == the custom HTMLElement itself)
const _internals = this.attachInternals();

_internals.setFormValue(value);

Problem is, I'm really struggling to figure out where I can hook in to have access to both:

The mounted DOM element (the one above the shadow root, i.e. <my-custom-element>, not just some ref() in the template), and
Reactive state of the component to get value

...So far I'm mostly using Vue's composition and script setup APIs which admittedly feel like they make this even harder: For example onMounted doesn't define this at all. But even using the equivalent options API mounted: () => {} I see this.$el seems to be the first element in the template/shadow root, not the parent custom element that owns the shadow root.

I also looked at going the other way - starting from the created CustomElement class and trying to work back through to useful Vue data & hooks... But couldn't find a way here either:

import { defineCustomElement } from "vue";
import MyCustomComponent from "./components/MyCustomComponent.ce.vue"
const MyCustomElement = defineCustomElement(MyCustomComponent);
class MyCustomElementFormAssoc extends MyCustomElement {
  static get formAssociated() {
    return true;
  }

  constructor(initialProps?: Record<string, any> | undefined) {
    super(initialProps);
    const _internals = this.attachInternals();

    // But here the component isn't even mounted yet - this._instance doesn't
    // exist and presumably reactive state doesn't either, so can't do:
    //   _internals.setFormValue(someValueState);
  }
}
customElements.define("my-custom-element", MyCustomElementFormAssoc);

So while in general, in line with other Vue 3 answers "there is no single root element and we should use refs instead", in my case I'm specifically trying to access the Custom Element defining the component - not the element(s) inside the template. The rendered DOM looks something like:

    <my-custom-element class="this-one-is">
      #shadow-root (open)
      <div class="custom-element-template-can-have-multiple-roots"></div>
      <div class="but-these-are-not-the-elements-im-looking-for"></div>
    </my-custom-element>

Does anybody know how it can be done?

Sounds like you want to stuff the Home Depot (native) into an IKEA (Vue) factory, and sell it as a Home Depot Component. Have you calculated how much time you will have to spend when Vue hits versions 4,5,6, etc? and you must refactor your code. Versus how much time you now have to spend on 100% Home Depot, which will run without any required changes for another 27 JS years. — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Feb 28, 2022 at 20:30

Thomas Urban · Accepted Answer · 2023-05-06 15:23:44Z

1

Agree this is a bad code smell and a signal to evaluate whether Vue is really a good fit for the use case in general: Hacking around with hybrid Web Components that aren't quite native but aren't quite Vue either is likely to be a maintenance burden even if it works today.

But needs must - and my current workaround for this is to track back from some reference element in the template (doesn't really matter what) via DOM, like this:

// (MyCustomComponent.ce.vue script setup)

import { ref } from "vue";

const someTemplateRef = ref();

onMounted(() => {
  const hostNode = someTemplateRef.value.getRootNode()?.host;
});

edited May 6, 2023 at 15:23

Thomas Urban

5,18929 silver badges36 bronze badges

answered Mar 3, 2022 at 3:17

dingus

1,0892 gold badges13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tony19 Over a year ago

For some reason, that doesn't seem to work in this demo. Can you fork that StackBlitz to demonstrate the solution?

dingus Over a year ago

Hey yes sure - the difference is I was accessing the host node from within the component whereas you're looking from outside. Here's a fork that I think should show both

t0byman Over a year ago

Aren't you getting the The target element is not a form-associated custom element error? Here's a fork of your fork.

Collectives™ on Stack Overflow

Referencing the host element in Vue v3 Custom Element components

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related