fix: fixed #2102

CHANGELOG.md

@@ -17,6 +17,8 @@
 - **#2141**: Added St Mary's Road symbols for theoretical computer science, 
   including `\mapsfrom`.
 - **#2158** Support the German keyboard layout on Linux.
+- **#2102** The mathfield element now respects the `user-select` CSS property.
+  If it is set to `none`, the mathfield will not be selectable.
 
 ## 0.96.1 (2023-11-15)
 

src/public/mathfield-element.ts

@@ -1188,6 +1188,11 @@ export class MathfieldElement extends HTMLElement implements Mathfield {
     }
 
     this.attachShadow({ mode: 'open', delegatesFocus: true });
+
+    const computedStyle = window.getComputedStyle(this);
+    const pointerEvents = computedStyle.userSelect === 'none' ? 'none' : 'auto';
+    const shadowRootMarkup = `<span style="pointer-events:${pointerEvents}"></span><slot style="display:none"></slot>`;
+
     if (this.shadowRoot && 'adoptedStyleSheets' in this.shadowRoot) {
       // @ts-ignore
       this.shadowRoot!.adoptedStyleSheets = [
@@ -1196,13 +1201,13 @@ export class MathfieldElement extends HTMLElement implements Mathfield {
         getStylesheet('mathfield-element'),
       ];
       // @ts-ignore
-      this.shadowRoot!.innerHTML = `<span style="pointer-events:auto"></span><slot style="display:none"></slot>`;
+      this.shadowRoot!.innerHTML = shadowRootMarkup;
     } else {
       this.shadowRoot!.innerHTML = `<style>${getStylesheetContent(
         'core'
       )}${getStylesheetContent('mathfield')}${getStylesheetContent(
         'mathfield-element'
-      )}</style><span style="pointer-events:auto"></span><slot style="display:none"></slot>`;
+      )}</style>${shadowRootMarkup}`;
     }
 
     // Record the (optional) configuration options, as a deferred state