diff --git a/examples/files.json b/examples/files.json
index e837caa35967ba..4c6c54460d1448 100644
--- a/examples/files.json
+++ b/examples/files.json
@@ -338,6 +338,7 @@
 		"webxr_vr_handinput_pointerdrag",
 		"webxr_vr_handinput_pressbutton",
 		"webxr_vr_haptics",
+		"webxr_vr_htmlmesh",
 		"webxr_vr_layers",
 		"webxr_vr_panorama",
 		"webxr_vr_panorama_depth",
diff --git a/examples/js/interactive/HTMLMesh.js b/examples/js/interactive/HTMLMesh.js
index ae7eeba4698999..89665384392836 100644
--- a/examples/js/interactive/HTMLMesh.js
+++ b/examples/js/interactive/HTMLMesh.js
@@ -8,7 +8,8 @@
 			const geometry = new THREE.PlaneGeometry( texture.image.width * 0.001, texture.image.height * 0.001 );
 			const material = new THREE.MeshBasicMaterial( {
 				map: texture,
-				toneMapped: false
+				toneMapped: false,
+				transparent: true
 			} );
 			super( geometry, material );
 
@@ -83,7 +84,19 @@
 
 		update() {
 
-			this.image = html2canvas( this.dom );
+			this.image = html2canvas( this.dom ); //when canvas size changed, this is needed; but I don't understand why! Do we lose time to call it at every update?
+
+			if ( ! this.prevCanvasSize || this.image.width !== this.prevCanvasSize.width || this.image.height !== this.prevCanvasSize.height ) {
+
+				this.prevCanvasSize = {
+					width: this.image.width,
+					height: this.image.height
+				};
+				super.dispose();
+				console.log( 'canvas size changed, dispose' ); //I'll remove that later
+
+			}
+
 			this.needsUpdate = true;
 			this.scheduleUpdate = null;
 
@@ -293,6 +306,16 @@
 
 			}
 
+			if ( element.shadowRoot ) {
+
+				for ( let i = 0; i < element.shadowRoot.childNodes.length; i ++ ) {
+
+					drawElement( element.shadowRoot.childNodes[ i ], style );
+
+				}
+
+			}
+
 			if ( isClipping ) clipper.remove();
 
 		}
@@ -353,6 +376,16 @@
 
 				}
 
+				if ( element.shadowRoot ) {
+
+					for ( let i = 0; i < element.shadowRoot.childNodes.length; i ++ ) {
+
+						traverse( element.shadowRoot.childNodes[ i ] );
+
+					}
+
+				}
+
 			}
 
 		}
diff --git a/examples/jsm/interactive/HTMLMesh.js b/examples/jsm/interactive/HTMLMesh.js
index d9212e8f15ce1e..4b215b27203837 100644
--- a/examples/jsm/interactive/HTMLMesh.js
+++ b/examples/jsm/interactive/HTMLMesh.js
@@ -14,7 +14,7 @@ class HTMLMesh extends Mesh {
 		const texture = new HTMLTexture( dom );
 
 		const geometry = new PlaneGeometry( texture.image.width * 0.001, texture.image.height * 0.001 );
-		const material = new MeshBasicMaterial( { map: texture, toneMapped: false } );
+		const material = new MeshBasicMaterial( { map: texture, toneMapped: false, transparent: true } );
 
 		super( geometry, material );
 
@@ -92,6 +92,14 @@ class HTMLTexture extends CanvasTexture {
 	update() {
 
 		this.image = html2canvas( this.dom );
+
+		//when canvas size changed, this is needed; but I don't understand why! Do we lose time to call it at every update?
+		if ( !this.prevCanvasSize || this.image.width !== this.prevCanvasSize.width || this.image.height !== this.prevCanvasSize.height) {
+			this.prevCanvasSize = { width: this.image.width, height: this.image.height };
+			super.dispose();
+			console.log("canvas size changed, dispose"); //I'll remove that later
+		}
+
 		this.needsUpdate = true;
 
 		this.scheduleUpdate = null;
@@ -308,6 +316,14 @@ function html2canvas( element ) {
 
 		}
 
+		if(element.shadowRoot) {
+			for ( let i = 0; i < element.shadowRoot.childNodes.length; i ++ ) {
+
+				drawElement( element.shadowRoot.childNodes[ i ], style );
+
+			}
+		}
+
 		if ( isClipping ) clipper.remove();
 
 	}
@@ -375,6 +391,15 @@ function htmlevent( element, event, x, y ) {
 
 			}
 
+			if(element.shadowRoot) {
+
+				for ( let i = 0; i < element.shadowRoot.childNodes.length; i ++ ) {
+
+					traverse( element.shadowRoot.childNodes[ i ] );
+
+				}
+			}
+
 		}
 
 	}
diff --git a/examples/screenshots/webxr_vr_htmlmesh.jpg b/examples/screenshots/webxr_vr_htmlmesh.jpg
new file mode 100644
index 00000000000000..238c68afbc2908
Binary files /dev/null and b/examples/screenshots/webxr_vr_htmlmesh.jpg differ
diff --git a/examples/webxr_vr_htmlmesh.html b/examples/webxr_vr_htmlmesh.html
new file mode 100644
index 00000000000000..3dd5353b841d2d
--- /dev/null
+++ b/examples/webxr_vr_htmlmesh.html
@@ -0,0 +1,418 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js vr - sandbox</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+	<body>
+		<div id="basic-html-mesh" style="position: absolute; left: 100px;">
+			Stantard JS
+			<!-- this is a comment! -->
+			<button class="btn-count">Count</button>
+			<ul>
+				<li>one</li>
+				<li>two</li>
+			</ul>
+		</div>
+
+		<!-- Import maps polyfill -->
+		<!-- Remove this when import maps will be widely supported -->
+		<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js"
+				}
+			}
+		</script>
+
+		<script type="module">
+			import { LitElement, html, css } from "https://cdn.skypack.dev/lit?min";
+
+			class MyElementChild extends LitElement {
+
+				static properties = {
+					counter: {}
+				};
+
+				constructor() {
+					super();
+				}
+
+				render() {
+					return html`
+                    <p>
+                    	LitChild
+						<button @click = "${this.inc}">+1</button>
+						${this.counter}
+                    </p>
+                `;
+				}
+
+				inc() {
+					this.counter++;
+					this.dispatchEvent(new CustomEvent('select', {detail: this.counter}))
+				}
+			}
+			customElements.define('lit-exple-child-el', MyElementChild);
+
+			class MyElement extends LitElement {
+				static get styles() {
+					// language=CSS
+					return css`
+						:host {
+							background-color: #231a49;
+						}
+
+						button {
+							color: blue
+						}
+			`
+
+				}
+
+				static properties = {
+					_counter: { state: true },
+					subcounter: {state: true}
+				};
+
+				constructor() {
+					super();
+
+					this._counter = 9;
+					this.subcounter = 2;
+				}
+
+				render() {
+					return html`
+                    <p>LitElement:
+						<button @click = "${this.inc}">+</button>
+						<button @click = "${this.dec}">-</button>
+						${this._counter}
+					</p>
+					SubCounter ${this.subcounter}
+					<lit-exple-child-el @select=${this.onselectSubcounter} .counter=${this.subcounter}></lit-exple-child-el>
+                `;
+				}
+
+				updated(changedProperties) {
+					this.dispatchEvent(new CustomEvent('lit-updated')) //this is needed, because HTMLMesh, uses MutationObserver which ignores shadow
+				}
+
+				onselectSubcounter(e) {
+					this.subcounter = e.detail
+				}
+
+				dec() {
+					this._counter--;
+				}
+				inc() {
+					this._counter++;
+				}
+			}
+			customElements.define('lit-exple-el', MyElement);
+
+		</script>
+
+
+		<lit-exple-el id="lit-html-mesh" style="position: absolute; left: 300px;"></lit-exple-el>
+
+		<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+		<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
+
+		<div class="react-count-btn" style="position: absolute; left: 500px;"></div>
+
+		<script>
+			class CountButton extends React.Component {
+				constructor(props) {
+					super(props);
+					this.state = { count: 0 };
+				}
+
+				countClick() {
+					this.setState(prevState => {
+						return {count: prevState.count + 1}
+					})
+				}
+
+				render() {
+					return React.createElement(
+						'button',
+						{ onClick: () => this.countClick() },
+						this.state.count ? this.state.count : 'React Count'
+					);
+				}
+			}
+
+			ReactDOM.render(React.createElement(CountButton), document.querySelector('.react-count-btn'))
+		</script>
+
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
+			import { Lensflare, LensflareElement } from './jsm/objects/Lensflare.js';
+			import { Reflector } from './jsm/objects/Reflector.js';
+			import { VRButton } from './jsm/webxr/VRButton.js';
+
+			import { HTMLMesh } from './jsm/interactive/HTMLMesh.js';
+			import { InteractiveGroup } from './jsm/interactive/InteractiveGroup.js';
+			import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';
+
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+			import Stats from './jsm/libs/stats.module.js';
+
+			let camera, scene, renderer;
+			let reflector;
+			let stats, statsMesh;
+			let basicHtmlMesh, litHtmlMesh, reactHtmlMesh;
+
+			const parameters = {
+				radius: 0.6,
+				tube: 0.2,
+				tubularSegments: 150,
+				radialSegments: 20,
+				p: 2,
+				q: 3,
+				thickness: 0.5
+			};
+
+			init();
+			animate();
+
+			function init() {
+
+				scene = new THREE.Scene();
+
+				new RGBELoader()
+					.setPath( 'textures/equirectangular/' )
+					.load( 'moonless_golf_1k.hdr', function ( texture ) {
+
+						texture.mapping = THREE.EquirectangularReflectionMapping;
+
+						scene.background = texture;
+						scene.environment = texture;
+
+					} );
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
+				camera.position.set( 0, 1.6, 1.5 );
+
+				//
+
+				const torusGeometry = new THREE.TorusKnotGeometry( ...Object.values( parameters ) );
+				const torusMaterial = new THREE.MeshPhysicalMaterial( {
+					transmission: 1.0, roughness: 0, metalness: 0.25, thickness: 0.5
+				} );
+				const torus = new THREE.Mesh( torusGeometry, torusMaterial );
+				torus.name = 'torus';
+				torus.position.y = 1.5;
+				torus.position.z = - 2;
+				scene.add( torus );
+
+				const cylinderGeometry = new THREE.CylinderGeometry( 1, 1, 0.1, 50 );
+				const cylinderMaterial = new THREE.MeshStandardMaterial();
+				const cylinder = new THREE.Mesh( cylinderGeometry, cylinderMaterial );
+				cylinder.position.z = - 2;
+				scene.add( cylinder );
+
+				// lensflare
+				const loader = new THREE.TextureLoader();
+				const texture0 = loader.load( 'textures/lensflare/lensflare0.png' );
+				const texture3 = loader.load( 'textures/lensflare/lensflare3.png' );
+
+				const lensflare = new Lensflare();
+				lensflare.position.set( 0, 5, - 5 );
+				lensflare.addElement( new LensflareElement( texture0, 700, 0 ) );
+				lensflare.addElement( new LensflareElement( texture3, 60, 0.6 ) );
+				lensflare.addElement( new LensflareElement( texture3, 70, 0.7 ) );
+				lensflare.addElement( new LensflareElement( texture3, 120, 0.9 ) );
+				lensflare.addElement( new LensflareElement( texture3, 70, 1 ) );
+				scene.add( lensflare );
+
+				//
+
+				reflector = new Reflector( new THREE.PlaneGeometry( 2, 2 ), {
+					textureWidth: window.innerWidth * window.devicePixelRatio,
+					textureHeight: window.innerHeight * window.devicePixelRatio
+				} );
+				reflector.position.x = 1;
+				reflector.position.y = 1.5;
+				reflector.position.z = - 3;
+				reflector.rotation.y = - Math.PI / 4;
+				// TOFIX: Reflector breaks transmission
+				// scene.add( reflector );
+
+				const frameGeometry = new THREE.BoxGeometry( 2.1, 2.1, 0.1 );
+				const frameMaterial = new THREE.MeshPhongMaterial();
+				const frame = new THREE.Mesh( frameGeometry, frameMaterial );
+				frame.position.z = - 0.07;
+				reflector.add( frame );
+
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.autoClear = false;
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.xr.enabled = true;
+				document.body.appendChild( renderer.domElement );
+
+				document.body.appendChild( VRButton.createButton( renderer ) );
+
+				window.addEventListener( 'resize', onWindowResize );
+
+				//
+
+				const geometry = new THREE.BufferGeometry();
+				geometry.setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 5 ) ] );
+
+				const controller1 = renderer.xr.getController( 0 );
+				controller1.add( new THREE.Line( geometry ) );
+				scene.add( controller1 );
+
+				const controller2 = renderer.xr.getController( 1 );
+				controller2.add( new THREE.Line( geometry ) );
+				scene.add( controller2 );
+
+				//
+
+				const controllerModelFactory = new XRControllerModelFactory();
+
+				const controllerGrip1 = renderer.xr.getControllerGrip( 0 );
+				controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) );
+				scene.add( controllerGrip1 );
+
+				const controllerGrip2 = renderer.xr.getControllerGrip( 1 );
+				controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) );
+				scene.add( controllerGrip2 );
+
+				// GUI
+
+				function onChange() {
+
+					torus.geometry.dispose();
+					torus.geometry = new THREE.TorusKnotGeometry( ...Object.values( parameters ) );
+
+				}
+
+				function onThicknessChange() {
+
+					torus.material.thickness = parameters.thickness;
+
+				}
+
+				const gui = new GUI( { width: 300 } );
+				gui.add( parameters, 'radius', 0.0, 1.0 ).onChange( onChange );
+				gui.add( parameters, 'tube', 0.0, 1.0 ).onChange( onChange );
+				gui.add( parameters, 'tubularSegments', 10, 150, 1 ).onChange( onChange );
+				gui.add( parameters, 'radialSegments', 2, 20, 1 ).onChange( onChange );
+				gui.add( parameters, 'p', 1, 10, 1 ).onChange( onChange );
+				gui.add( parameters, 'q', 0, 10, 1 ).onChange( onChange );
+				gui.add( parameters, 'thickness', 0, 1 ).onChange( onThicknessChange );
+				gui.domElement.style.visibility = 'hidden';
+
+				const group = new InteractiveGroup( renderer, camera );
+				scene.add( group );
+
+				const mesh = new HTMLMesh( gui.domElement );
+				mesh.position.x = - 0.75;
+				mesh.position.y = 1.5;
+				mesh.position.z = - 0.5;
+				mesh.rotation.y = Math.PI / 8;
+				mesh.scale.setScalar( 2 );
+				group.add( mesh );
+
+
+				// Add stats.js
+				stats = new Stats();
+				stats.dom.style.width = '80px';
+				stats.dom.style.height = '48px';
+				document.body.appendChild( stats.dom );
+
+				statsMesh = new HTMLMesh( stats.dom );
+				statsMesh.position.x = - 1.05;
+				statsMesh.position.y = 2;
+				statsMesh.position.z = - 0.6;
+				statsMesh.rotation.y = Math.PI / 8;
+				statsMesh.scale.setScalar( 2.5 );
+				group.add( statsMesh );
+
+				// add basic htmlmesh
+				let basicHtmlMeshEl = document.querySelector('#basic-html-mesh');
+				let count = 0;
+				let btnCountEl = window.btncountel = basicHtmlMeshEl.querySelector('.btn-count');
+				btnCountEl.addEventListener('click', () => btncountel.textContent=++count);
+
+				basicHtmlMesh = new HTMLMesh(basicHtmlMeshEl);
+				basicHtmlMesh.position.x = - 0.75;
+				basicHtmlMesh.position.y = 2;
+				basicHtmlMesh.position.z = - 0.6;
+				basicHtmlMesh.rotation.y = Math.PI / 8;
+				basicHtmlMesh.scale.setScalar( 2.5 );
+				group.add( basicHtmlMesh );
+
+				// add lit htmlmesh
+				let elLit = document.querySelector('#lit-html-mesh')
+				litHtmlMesh = new HTMLMesh(elLit);
+				litHtmlMesh.position.x = - 0.30;
+				litHtmlMesh.position.y = 2;
+				litHtmlMesh.position.z = - 0.6;
+				litHtmlMesh.rotation.y = Math.PI / 8;
+				litHtmlMesh.scale.setScalar( 2.5 );
+				group.add( litHtmlMesh );
+				elLit.addEventListener('lit-updated', () => {
+					if ( ! litHtmlMesh.material.map.scheduleUpdate ) {
+						litHtmlMesh.material.map.scheduleUpdate = setTimeout( () => litHtmlMesh.material.map.update(), 16 );
+					}
+				})
+
+				//add react htmlmesh
+				reactHtmlMesh = new HTMLMesh(document.querySelector('.react-count-btn'));
+				reactHtmlMesh.position.x = 0;
+				reactHtmlMesh.position.y = 2;
+				reactHtmlMesh.position.z = - 0.6;
+				reactHtmlMesh.rotation.y = Math.PI / 8;
+				reactHtmlMesh.scale.setScalar( 2.5 );
+				group.add( reactHtmlMesh );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				renderer.setAnimationLoop( render );
+
+			}
+
+			function render() {
+
+				const time = performance.now() * 0.0002;
+				const torus = scene.getObjectByName( 'torus' );
+				torus.rotation.x = time * 2;
+				torus.rotation.y = time * 5;
+
+				renderer.render( scene, camera );
+				stats.update();
+
+				// Canvas elements doesn't trigger DOM updates, so we have to update the texture
+				statsMesh.material.map.update();
+
+			}
+
+		</script>
+	</body>
+</html>