WebC: Cannot use "slot" content from parent component

[yarthur]

I think this belongs here, but maybe it should go to the WebC plugin or WebC itself. Please advise if that's the case.

I want to create a code snippet component that will include the highlighted code and a Copy button. Ex:

<syntax-highlight :language="language" webc:import="npm:@11ty/eleventy-plugin-syntaxhighlight"><slot></slot></syntax-highlight>

<button class="Button Button--outline">Copy to Clipboard</button>
<script>// script to copy to clipboard</script>

I expect that I should be able to use it as such:

<code-snippet language="html"><h1>Hello World!</h1></code-snippet>

And that it should result in

<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Hello World<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span></code></pre>

<button class="Button Button--outline">Copy to Clipboard</button>
[... script stuff somewhere...]

Instead, the <slot></slot> is what is highlighted.

I'm hoping to be able to nest this <code-snippet> component in another component that would also render a real-life example of the code being shown. Ex:

<div class="DemoCode">
<h1>Hello World!</h1>
</div>

<div class="CodeView">
    <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Hello World<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span></code></pre>

    <button class="Button Button--outline">Copy to Clipboard</button>
    [...script stuff again...]
</div>

Is there a way I can pass the slot content of the parent component into this webc component? I tried @raw/@html/@text, and that didn't seem to work. The one thing I was able to do was essentially copy the content of the webc component definition in my component, but this seems less-than-ideal.

Thanks!

[nazgul]

I suspect this is also why I've been unable to find a way to pass markdown to a webc component which then tries to render it. I can't put inside an 'md' template. I've basically resorted to putting my markdown all in dynamic properties and passing it that way and just ignoring slots.

And while you'd think using javascript and calling markdown render directly on this.slots.text.default should work, the slots datastructure is always empty in my use case (html in a webc template, calling a webc component--the component can use fine, but javascript sees an empty data structure). I'll try to document that last use case, because I see plenty of tests for webc that imply it should work.