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

i was drawn to using 11ty with webc due to its simplicity and similarity to react. the built in bundling allows creation of light webpages with few dependencies.

the way of doing this with 11ty webc is by using webc:scoped. using scoped a <random-component> file can contain scoped css that is only bundled to a page when the component is present.

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

which produces something like.

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

if not defined with webc:scoped="desired-name" the component's class is randomly generated, which was fine for me. however, i didn't like the host component tag <random-component ... > in the final markup. i was willing to willing to live with that, however then i came across two more issues.

1. all the host component props are visible and ugly in the html!
2. cannot properly overwrite valid html tags.

to show both of these problems, here's my my old footer.

awful.

resolution

turns out i expected the all components to be bundled like html-only components, so i made them html-only components.

1. moved the styles to a separate webc file.
2. replaced the host selector with a css 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.