FIameCaster / prism-code-editor

Lightweight, extensible code editor component for the web using Prism
https://prism-code-editor.netlify.app
MIT License
57 stars 7 forks source link

Failed to execute 'attachShadow' on 'Element' #17

Closed icrann closed 5 months ago

icrann commented 5 months ago

This library seems really useful but I'm having some issues getting it running.

I'm getting the following error while trying to run the basic editor:

Uncaught DOMException: Failed to execute 'attachShadow' on 'Element': This element does not support attachShadow
    at minimalEditor (https://icrann.irish/float/prism-code-editor/setups/index.js:22:38)
    at basicEditor (https://icrann.irish/float/prism-code-editor/setups/index.js:39:18)
    at https://icrann.irish/float/index.js:5:16

My code is below:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Float</title>

        <script type="module" src="index.js"></script>
    </head>
    <body>

        <textarea id="editor"></textarea>

    </body>
</html>
import { minimalEditor, basicEditor, fullEditor, readonlyEditor } from "./prism-code-editor/setups/index.js"
// Importing Prism grammars
import "./prism-code-editor/prism/languages/markup"

const editor = basicEditor(
  "#editor",
  {
    language: "html",
    theme: "github-dark",
  },
  () => console.log("ready"),
)

Thanks for any help.

FIameCaster commented 5 months ago

The element to add the element to has to be a container you can attach a shadowroot to. You can find a list on MDN. Using a <textarea> as a container makes so sense since textarea elements can't have anything else than plain text as children.

I'm sure you might've figured this out since you closed the issue.