Use a webc component inside a shortcode

[kjvdven]

I'm making a style guide with eleventy and now I have a short code for displaying the component. For previewing the component I use an iFrame.

Now I want to replace the iFrame with a webcomponent and I was hoping I could use the eleventy-plugin-webc for that.

// Code examples shortcode
  eleventyConfig.addPairedShortcode(
    "component",
    async function (content, language = "html", preview = true, markup = true) {
      var code = content.trim();
      code = await prettier.format(code, {
        printWidth: 120,
        parser: "html",
      });
      var component = "";
      var iframeID = eleventyConfig.getFilter("getRandomUUID")();

      if (preview && language === "html") {
        var iframeContent = `<link rel="stylesheet" href="/assets/css/design-system.css"><link rel="stylesheet" href="/assets/css/iframe.css">${code}<script type="module" src="/assets/js/design-system.js"></script><script type="module" src="/assets/js/iframe.js"></script>`;
        component += `<div class="ld-preview"><iframe id="iframe-${iframeID}" style="width: 100%;" srcdoc="${iframeContent.replace(/"/g, "&quot;")}" onload="this.style.height=this.contentDocument.body.scrollHeight +'px';"></iframe></div>`;
      }
      if (markup) {
        code = code.replace(/(<svg[^>]*>)[\s\S]*?(<\/svg>)/g, "$1\n<!-- SVG content -->\n$2");
        code = await prettier.format(code, {
          printWidth: 120,
          parser: "html",
        });
        component += `<div class="ld-markup">${eleventyPrism(code, language)}</div>\n`;
      }

      component += `<webc-test>${code}</webc-test>`;
      component += `<webc-preview>${code}</webc-preview>`;

      return `<div class="ld-component">${component}</div>\n`;
    },
  );

I hoped that the 2 webc components would be processed, but it seems they are ignored. If I manually put the webc components in a liquid file the components do render as expected.

{% renderTemplate "webc" %}
  <webc-preview></webc-preview>
{% endrenderTemplate %}

Is this something which can be achieved with the "eleventy-plugin-webc" or should I look for other solutions?