Code block in HTML presentation issues Uncaught DOMException: Operation is not supported about marp-core HOT 3 OPEN

🚚 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.

from marp-core.

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.

from marp-core.

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.

from marp-core.