style: 2d and spatial dom should use separate style cache (#16)

fixtures/html-in-spatial/basic.xsml

@@ -5,9 +5,18 @@
       @material liteblue {
         diffuse-color: blue;
       }
+      @keyframes rotateSelf {
+        from {
+          rotation: 0 0 0;
+        }
+        to {
+          rotation: 0 360 0;
+        }
+      }
       #inner {
         position: 0 -1 0;
         material: "liteblue";
+        animation: "rotateSelf" infinite 5s;
       }
     </style>
   </head>

src/living/helpers/babylonjs/InteractiveDynamicTexture.ts

@@ -1,3 +1,4 @@
+import type DocumentOrShadowRootImpl from '../../nodes/DocumentOrShadowRoot';
 import * as taffy from '@bindings/taffy';
 import { NativeDocument } from '../../../impl-interfaces';
 import { HTMLElementImpl } from '../../nodes/HTMLElement';
@@ -267,7 +268,8 @@ export class InteractiveDynamicTexture extends BABYLON.DynamicTexture {
         /**
          * Check if the node has style cache, if not, it means the node should be updated.
          */
-        let styleCache = node._ownerDocument._styleCache;
+        const documentOrShadowRoot = node.getRootNode() as unknown as DocumentOrShadowRootImpl;
+        let styleCache = documentOrShadowRoot._styleCache;
         if (!styleCache) {
           return true;
         }

src/living/helpers/style-rules.ts

@@ -3,6 +3,7 @@ import type { NodeImpl } from '../nodes/Node';
 import type { ElementImpl } from '../nodes/Element';
 import type { SpatialElement } from '../nodes/SpatialElement';
 import type { HTMLElementImpl } from '../nodes/HTMLElement';
+import type DocumentOrShadowRootImpl from '../nodes/DocumentOrShadowRoot';
 import { isDocumentNode, isHTMLElement, isSpatialElement } from '../node-type';
 
 import CSSRuleListImpl from '../cssom/CSSRuleList';
@@ -50,9 +51,15 @@ export const propertiesWithResolvedValueImplemented = {
   },
 };
 
+/**
+ * Invalidates and clear the style cache map of the given element's root node.
+ * 
+ * @param elementImpl the element to invalidate the style cache for.
+ */
 export const invalidateStyleCache = (elementImpl: NodeImpl) => {
   if (elementImpl._attached) {
-    elementImpl._ownerDocument._styleCache = null;
+    const documentOrShadowRoot = elementImpl.getRootNode() as unknown as DocumentOrShadowRootImpl;
+    documentOrShadowRoot._styleCache = null;
   }
 };
 
@@ -88,12 +95,10 @@ export function getDeclarationForElement(elementImpl: SpatialElement): CSSSpatia
 export function getDeclarationForElement(elementImpl: HTMLElementImpl): CSSStyleDeclaration;
 export function getDeclarationForElement(elementImpl: ElementImpl): CSSStyleDeclaration;
 export function getDeclarationForElement(elementImpl: ElementImpl) {
-  /**
-   * FIXME: should we move the style cache to DocumentOrShadowRoot even though the _ownerDocument works?
-   */
-  let styleCache = elementImpl._ownerDocument._styleCache;
+  const documentOrShadowRoot = elementImpl.getRootNode() as unknown as DocumentOrShadowRootImpl;
+  let styleCache = documentOrShadowRoot._styleCache;
   if (!styleCache) {
-    styleCache = elementImpl._ownerDocument._styleCache = new WeakMap();
+    styleCache = documentOrShadowRoot._styleCache = new WeakMap();
   }
 
   const cachedDeclaration = styleCache.get(elementImpl);

src/living/nodes/DocumentOrShadowRoot.ts

@@ -1,3 +1,5 @@
+import type { ElementImpl } from './Element';
+import type CSSSpatialStyleDeclaration from '../cssom/CSSSpatialStyleDeclaration';
 import nwsapi from 'nwsapi';
 import CSSStyleSheetImpl from '../cssom/CSSStyleSheet';
 import StyleSheetListImpl from '../cssom/StyleSheetList';
@@ -8,6 +10,7 @@ import { NodeImpl } from './Node';
 export default class DocumentOrShadowRootImpl implements DocumentOrShadowRoot {
   _styleSheets: StyleSheetListImpl;
   _adoptedStyleSheets: CSSStyleSheetImpl[];
+  _styleCache: WeakMap<ElementImpl, CSSStyleDeclaration | CSSSpatialStyleDeclaration> | null = null;
 
   // CSS selectors
   _nwsapi: nwsapi.NWSAPI;

src/living/nodes/SpatialDocument.ts

@@ -332,7 +332,6 @@ export class SpatialDocumentImpl<T extends NativeDocument = NativeDocument> exte
   _executingScriptsObservers: Set<Promise<void>> = new Set();
   _isSpaceReady: boolean = false;
   _lastModified: string;
-  _styleCache: WeakMap<ElementImpl, CSSStyleDeclaration | CSSSpatialStyleDeclaration> | null = null;
   _lastFocusedElement: Element | null;
   _spatialKeyframesMap: Map<string, CSSSpatialKeyframesRule> = new Map();