[Docs] - HTML examples are broken

Describe the bug

The examples under https://cientos.tresjs.org/guide/misc/html-component.html#html are currently broken

Reproduction

https://cientos.tresjs.org/guide/misc/html-component.html#html

Steps to reproduce

No response

System Info

No response

Used Package Manager

npm

Code of Conduct

I agree to follow this project's Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
The provided reproduction is a minimal reproducible example of the bug.

Edit: Collecting bug symptoms and reproductions here

Symptoms

Cientos Html components without the transform prop appear to work properly. Only components with transform exhibit the bug.
Looking in the browser's dev tool's Inspector, it appears that the HTML elements are in the DOM. But they're not visible on screen.
It appears that the same error occurs in the Cientos playground: on the page /misc/html after running pnpm run playground in Cientos' root.
In the demos, the component appears after camera move.
In the component code, modifying the css styles between onLoop calls will cause the component to render on-screen.
By changing vNode props for the first few ticks of onLoop, the component will appear on screen after a few ticks.

Reproductions

(Possibly related?): Html component with transform prop does not appear on-screen.

Its weird, now I can see them on the page https://cientos.tresjs.org/guide/misc/html-component.html#html

Non-unique HTML id attributes

Fwiw, looking at the DOM, there's an HTML problem. The Cientos Html component uses id attributes. If more than one Html component is created, even in separate TresCanvass, at least these ids will be non-unique: "inner", "outer". HTML id's are designed to be unique in the document.

cientos/src/core/misc/html/HTML.vue

Line 194 in 55ca2bf

vnode.value = createVNode('div', { id: 'outer', style: styles.value }, [

@alvarosabu Do you want this to be opened as a separate issue?

Edit: the child of the 'inner' node uses the Scene's uuid as its id attribute. So it won't be unique unless it's the only Cientos <Html> component in the <TresCanvas />.

cientos/src/core/misc/html/HTML.vue

Line 198 in 55ca2bf

id: scene?.value.uuid,

Ohhh, probably we need to add a hash or a class instead

Ohhh, probably we need to add a hash or a class instead

At first glance, it doesn't appear that the id's are used for anything. I can't find any other references to "outer" or "inner" so far anyway.

So maybe they can just be removed.

Hey @alvarosabu !

This particular bug appears to come down to the overflow here:

cientos/src/core/misc/html/HTML.vue

Line 178 in 55ca2bf

    
                   el.value.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;'

Removing it and reloading causes the items to appear on-screen immediately after creation, as expected.

Fix(?)

Add the above styles to a regular DOM element, rather than an element managed by Vue:

create a wrapper for the entire component with const wrapper = document.createElement('div')
append el.value to wrapper
assign all the CSS above to wrapper
append wrapper to the renderer.DOMElement.parent

... then the component seems to work as expected.

The eventual solution will need to remove the wrapper when the component is unmounted.

Tested in Chrome and FF on Mac.

I've come across some other "fixes" by chance, but they're messier.

The problem occurs when installing dependencies with npm, but it doesn't happen with yarn

Is there an update to this issue?