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.

[GitNimay]

Vue does have normalization helpers for this, but I would be careful about treating them as a public “apply this to any DOM element” API.

For classes, normalizeClass is the closest fit:

import { normalizeClass } from "vue";

div.className = normalizeClass(attrs.class);

For styles, normalizeStyle can normalize Vue’s accepted :style shapes into an object or string form:

import { normalizeStyle } from "vue";

const normalized = normalizeStyle(attrs.style);

Then you can apply it manually:

import { normalizeClass, normalizeStyle, watchEffect } from "vue";

watchEffect(() => {
  const el = div.value;

  if (!el) {
    return;
  }

  el.className = normalizeClass(attrs.class);

  const style = normalizeStyle(attrs.style);

  el.removeAttribute("style");

  if (typeof style === "string") {
    el.style.cssText = style;
  } else if (style) {
    for (const [key, value] of Object.entries(style)) {
      if (value == null) {
        continue;
      }

      el.style.setProperty(
        key.startsWith("--")
          ? key
          : key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`),
        String(value),
      );
    }
  }
});

That said, the more Vue native approach is to let Vue render a small wrapper element and pass that actual DOM element to the mapping library:

<script setup lang="ts">
import { ref, onMounted } from "vue";

const el = ref<HTMLDivElement>();

onMounted(() => {
  if (!el.value) {
    return;
  }

  mapLibrary.useElement(el.value);
});
</script>

<template>
  <div ref="el" />
</template>

Then consumers can use normal Vue bindings:

<MapDiv
  :class="{ active: isActive }"
  :style="{ width: '100px', height: '100px' }"
/>

If the library absolutely requires you to create the element yourself with document.createElement, then manual normalization plus watchEffect is reasonable. Just remember that useAttrs() is not deeply reactive in the same way as a normal ref, so you should test updates carefully if the parent changes class or style after mount.

The short version is: use normalizeClass for ClassValue, use normalizeStyle for StyleValue, and then manually apply the result to the native element.

[rtcpw]

Thank you, this is exactly what I was looking for. I didn't see any of these functions in the official documentation, so that's why I couldn't find them.

[vinicq]

normalizeClass and normalizeStyle are exported from vue, and they do exactly the conversion you're describing. They're what the renderer uses internally to fold the ClassValue/StyleValue shapes into a flat string/object, so you get the same result the template would.

Since the element lives outside Vue's render tree, you mirror the attrs yourself in a watchEffect, so it re-applies whenever the bound class/style change:

import { ref, onMounted, useAttrs, watchEffect, normalizeClass, normalizeStyle } from 'vue'

defineOptions({ inheritAttrs: false })

const div = ref<HTMLDivElement>()
const attrs = useAttrs()

onMounted(() => {
  div.value = document.createElement('div')
  // hand div.value to your mapping library here
})

watchEffect(() => {
  const el = div.value
  if (!el) return
  el.className = normalizeClass(attrs.class)
  const style = normalizeStyle(attrs.style)
  el.style.cssText =
    typeof style === 'string'
      ? style
      : Object.entries(style ?? {}).map(([k, v]) => `${k}:${v}`).join(';')
})

normalizeStyle returns a string when the input already contains one, and an object otherwise, so the typeof branch covers both. watchEffect tracks attrs.class/attrs.style, so it stays in sync without a manual watcher list.

One caveat: these are normalization helpers, not a public "apply to any DOM node" API, so the surface could shift across minor versions. For a single third-party element that's a fair trade. If you want zero coupling, the same two functions are trivial to inline.

[rtcpw]

Thank you. It is indeed exactly what I was looking for. GitNimay has already mentioned these functions previously though.