Code block in HTML presentation issues Uncaught DOMException: Operation is not supported

[vainiusd]

Version of Marp Tool

marp-vscode 2.8.0

Operating System

macOS

Environment

• VS Code (version 1.88)]
• MacOS Sonoma 14.4.1
• Mozilla Firefox (125.0.2 (64-bit))

How to reproduce

Any code block defined in presentation:

--- marp: true ---

``` ```

Presentation exported to HTML and viewed in mozilla.

Expected behavior

No loading/console errors.

Actual behavior

Presentation loads, but with errors. This is especially visible with a larger presentation and a mobile browser.

Browser console output:

Uncaught DOMException: Operation is not supported
    <anonymous> file:///Users/user/slides/test.html:14
    w file:///Users/vdangovas/user/slides/test.html:14
    w file:///Users/vdangovas/user/slides/test.html:14
    <anonymous> file:///Users/user/slides/test.html:14
    <anonymous> file:///Users/user/slides/[test.html:14](file:///Users/user/slides/test.html) test.html:14
    <anonymous> file:///Users/user/slides/test.html:14
    w file:///Users/user/slides/test.html:14
    w file:///Users/user/slides/test.html:14
    <anonymous> file:///Users/user/slides/test.html:14
    <anonymous> file:///Users/user/slides/test.html:14

Line 14 is <script>!function()[...]

Additional information

Public instance with these errors: https://vainiusd.github.io/marp-cheatslides/

[yhatt]

🚚 Transferred the issue from marp-team/marp-vscode to marp-team/marp-core because it originates from the browser-side script of Marp Core.

TL;DR: The reported errors do not cause any problems in rendering Marp slides.

[yhatt]

This is due to the different behavior between Firefox and Chrome when defining the Marp Core's Web Component (<marp-pre> for auto-scaling code blocks in <pre> elements) using the is attribute.

When <marp-pre> component defined (at loading slides), both browsers tries to upgrade existing <pre is="marp-pre"> elements. While upgrading, there is a difference in each browser whether the element is already recognized as <marp-pre> at the time of setting the Shadow DOM in the constructor.

In Firefox, <pre> is not yet upgraded to <marp-pre> until initialization of the custom element (constructor) is over. <pre> element cannot attach the Shadow DOM due to security reasons, so the browser raises NotSupportedError for each <pre> elements.

In Chrome, <pre> is already upgraded to <marp-pre> while running constructor of the custom element. <marp-pre> is allowed to attach custom element so any exceptions will not bring when attaching Shadow DOM.

However, they are browser-side errors that occurs when updating the definition of existing HTML elements, and they do not stop the main JavaScript thread due to the exception. The subsequent processes in the script (more reliable Web Component upgrade process, to deal with upgrade failures in Firefox and Safari) will be continue without any problems, so there are not any problems in rendering Marp slides.

[yhatt]

Ideas to suppress errors:

• Swap the order of processes, to run more reliable Web Component upgrade before defining Web Components. With this approach, there is a possibility that the browser will display undefined elements for a brief period until the web components are defined.

• Simply catch and silence the exception. In this case, the component may be incomplete state until an explicit update process is performed.