Add some default styling to DOM-Overlay (#4901)

Author: AdaRoseCannon

examples/boilerplate/webxr-ar-lighting/index.html

@@ -8,23 +8,6 @@
 		body {
 			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 		}
-
-
-		#dom-overlay {
-			overflow: hidden;
-			position: absolute;
-			pointer-events: none;
-			box-sizing: border-box;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			top: 0;
-			padding: 1em;
-		}
-
-		#dom-overlay>* {
-			pointer-events: auto;
-		}
 	</style>
 </head>
 

src/style/aframe.css

@@ -396,3 +396,19 @@ a-scene audio {
   background-color: #00ceff;
   width: 100%;
 }
+
+.a-dom-overlay:not(.a-no-style) {
+  overflow: hidden;
+  position: absolute;
+  pointer-events: none;
+  box-sizing: border-box;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: 1em;
+}
+
+.a-dom-overlay:not(.a-no-style)>* {
+  pointer-events: auto;
+}

src/systems/webxr.js

@@ -22,9 +22,11 @@ module.exports.System = registerSystem('webxr', {
     };
     this.sessionReferenceSpaceType = data.referenceSpaceType;
 
+    data.overlayElement.classList.remove('a-dom-overlay');
     if (data.overlayElement) {
       this.warnIfFeatureNotRequested('dom-overlay');
       this.sessionConfiguration.domOverlay = {root: data.overlayElement};
+      data.overlayElement.classList.add('a-dom-overlay');
     }
   },