children of a custom entities are not visible

[lobau]

If you add children to a custom entity you define as extending MREntity, it's DOM children are not visible in the MRjs scene.

For example, in this sample code: https://codepen.io/lobau/pen/wvZVLw

<mr-app orbital="true">
    <!-- Left one -->
    <mr-div data-position='-0.3 0 0'>
        <mr-model src='https://assets.codepen.io/686746/koi_fish.glb' style="scale: 0.1"></model>
    </mr-div>

    <!-- Right one -->
    <mr-foo data-position='0.3 0 0'>
        <mr-model src='https://assets.codepen.io/686746/koi_fish.glb' style="scale: 0.1"></model>
    </mr-foo>

</mr-app>

The defined custom element, mr-foo:

class MRFoo extends MREntity {

    constructor() {
        super()
    }

    connected() {
        this.boxMesh = new THREE.Mesh(
            new THREE.BoxGeometry(0.2, 0.2, 0.2),
            new THREE.MeshPhongMaterial({
                color: "#ff9900",
                transparent: true,
                opacity: 0.4,
            }));
        this.object3D.add(this.boxMesh);
    }

}

customElements.define('mr-foo', MRFoo);

On the left, you have an mr-model as a child of an mr-div and it works as expected. On the right, you have a custom element (mr-foo) that is defined as class MRFoo extends MREntity. The child mr-model is not on the MRjs scene.

My assumption is that it has to do with adding the slotted elements in the shadowDOM maybe?

[hanbollar]

odd that that's having issues - i'll take a look 🤔

[hanbollar]

closing this as resolved by noodling in #619 - see https://github.com/Volumetrics-io/mrjs/pull/619#issuecomment-2108731844