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.