WebC scoped styles breaks Props?

[VAggrippino]

Why would a webc:scoped CSS block make a Prop not work.

I have some code that passes a number to a component as a Prop. Then the component shows that number of items from a collection.

I'm really happy with how this works, but I want to use different CSS styles for this component than I might use when rendering items from the collection in another context. That seems like a job for webc:scoped.

Unfortunately, if I add a <style webc:scoped> block to the component the prop is no longer available to the component code.

If I use the value as the text of an element (e.g. @text="myvalue"), the element will just be empty. If I put console.log(myvalue) in the webc:setup block, it'll show undefined in the console, but using it as a value (see the example in the code) just treats it like 0.

If I remove the at-sign, it works fine, but then the property will also be set in the rendered HTML.

/index.webc:

<collections-post @numposts="2"></collections-post>

/_components/collections-post.webc:

<!-- With this CSS block, the `numposts` valuable is not available to the component. -->
<style webc:scoped>
    :host > article {
        width: 100vw;
        display: grid;
        grid-template-rows: 3rem min-content;
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "title date"
            "content content";
        align-items: center;
    }

    :host .collections-post__title {
        grid-area: title;
        outline: 3px solid orange;
    }

    :host .collections-post__date {
        grid-area: date;
        outline: 3px solid red;
    }

    :host .collections-post__content {
        grid-area: content;
        outline: 3px solid yellow;
    }

    :host .collections-post__content .post__title {
        display: none;
    }
</style>

<script webc:setup>
    const recent_posts = (n) => {
        const posts = collections.post
        const sorted = posts.sort((a, b) => a.page.date < b.page.date ? -1 : 1)
        const top = sorted.slice(0 - n)
        return top.reverse()
    }
</script>

<article class="collections-post" webc:for="post of recent_posts(numposts)">
    <h3 class="collections-post__title"><a :href="post.data.page.url" @text="post.data.title"></a></h3>
    <div class="collections-post__date" @text="formatted_date(post.data.page.date)"></div>
    <div class="collections-post__content" @html="post.content"></div>
</article>

Both of these lines are in my base layout file:

    <style @raw="getBundle('css')" webc:keep></style>
    <script @raw="getBundle('js')" webc:keep></script>

I first discovered this problem while trying to understand how to Pass arguments to a WebC component.