useAttrs().style and useAttrs().class - How to bind attrs.style and attrs.class to external HTMLDivElement instance?

[rtcpw]

I have created a native div element:

const div = document.createElement('div');

I need to create an element like this because of the third-party mapping library that I use.

I would like to use Vue's :class and :style binding to bind the class/style to this element. To achieve this, I have wrapped the div element above in a custom component, and used useAttrs together with defineOptions to grab the attributes:

const div = ref<HTMLDivElement>();

onMounted(() => {
    div.value = document.createElement('div');
});

defineOptions({
  inheritAttrs: false,
});

const attrs = useAttrs();

The attrs.style is of type StyleValue, and attrs.class is of type ClassValue:

export type StyleValue = false | null | undefined | string | CSSProperties | Array<StyleValue>;
export type ClassValue = false | null | undefined | string | Record<string, any> | Array<ClassValue>;

---

I have not found a way to easily take attrs.class and attrs.style and bind it to the div (HTMLDivElement) above. Is there any utility function or perhaps some other approach I could take to achieve this?

---

Alternatively, is there a utility function that would convert these rather complex types (which are not the easiest to work with manually), and turn them into something easier to digest, eg. a simple Record<string, string> in the case of attrs.style, and perhaps Set<string> in case of attrs.class? This would at least give me the option to loop over these objects and call div.style.setProperty myself.

[aniruddhaadak80]

@rtcpw Nice integration scenario. Since that div is created outside Vue template rendering, fallthrough attrs (class / style) are not auto-applied there.

Practical approach:

1. read from useAttrs()
2. react to changes
3. manually mirror class/style to the external element

That keeps Vue as source-of-truth while still supporting third-party DOM ownership.

References:

• https://vuejs.org/api/composition-api-helpers.html#useattrs
• https://vuejs.org/guide/components/attrs

[rtcpw]

Thanks, but as of vue@3.5.30, useAttrs().style is typed as:

export type StyleValue = false | null | undefined | string | CSSProperties | Array<StyleValue>;

and useAttrs().class is typed as:

export type ClassValue = false | null | undefined | string | Record<string, any> | Array<ClassValue>;

This is not reflected in the links you sent, which I have perused before anyway.

The fact that both types can be just string basically requires me to write my own parser of CSS/Class strings. Additionally, the recursive nature of both types complicates things substantially. Since Vue has to parse these values anyway and turn it into something easier to deal with (eg. Record<string, string>), I think exposing that utility function would be beneficial to everyone who needs to deal with useAttrs().style and useAttrs().class directly.

If the return type definition above is too broad and the actual return values are much simpler, then perhaps the Vue TypeScript definition of the types should be constrained to whatever useAttrs().style and useAttrs().class actually returns.