webc:scoped

tldr

Use <style webc:nokeep> without the :host selector to keep component tags out of bundled html.

<random-component class="random-component">
  <slot>fallback</slot>
</random-component>
<style webc:nokeep>
  .random-component {
      ...
  }
</style>

background

scoped components in webc sounds like a good way to create small webpages. the scoped styles and scripts are bundled alongside the component, and are only requested by webpages that use the component. here's a webc file based on the scoped component example from the documentation:

random
<style webc:scoped>
  :host {
    color: blue;
  }
</style>

that produces something similar to:

<random-component class="wcl2xedjk">random</random-component>

since it wasn't defined with webc:scoped="desired-name", the component's class was randomly generated. the component tag (<random-component ... >) remains in the final html, including its attributes. since data is passed to components via attributes, this may result in some attribute="[object Object]" in the final html.

to show both of these problems, here's the markup of my old footer once built.

<footer class="footer" primaries="[object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]" me="[object Object]" metadata="[object Object]" links="[object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]">
    <footer class="h-card">
        <div> ... </div>
        <nav class="sitemap"> ... </nav>
    </footer>
</footer>

resolution

all of those side effects could be avoided if these were html-only components. that can simply be done by adding webc:nokeep to the style and script tags.

1. moved the styles to a separate webc file.
2. replaced the host selector with a class.
3. imported css with <style webc:is="css.webc" webc:nokeep>.

<random-component class="random-component"> ... </random-component>
<style webc:is="css.random-component" webc:nokeep></style>

<style>
  .random-component {
      ...
  }
</style>

single-file

this can be done in a single file, by adding webc:nokeep to the style tag.

trade offs

well, this isn't webc:scoped. so no styles deduplication or :host selector available.