eleventy-plugin-webc
eleventy-plugin-webc copied to clipboard
11ty
:host CSS class is duplicated and appended to all children
The class generated for the :host selector in components with scoped styles gets appended to all of the children of that component.
Steps to repro:
1. Set up [email protected] and @11ty/eleventy-plugin-webc"@^0.11.2
2. Add the webc plugin to eleventyConfig with no options
3. Create a component with children:
---
layout: root.webc
---
<main webc:root="override">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</main>
<style webc:scoped>
:host {
background: red;
}
:host .placeholder {
background: blue;
}
</style>
Expected result:
Actual result:
<main class="wl-ttzecz">
<div class="placeholder wl-ttzecz"></div> ← note the duplicated class from the root
<div class="placeholder wl-ttzecz"></div>
<div class="placeholder wl-ttzecz"></div>
<div class="placeholder wl-ttzecz"></div>
</main>
More context:
Here's the intro.webc template I'm using:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#161616" />
<title @html="this.page.url || 'no title'"></title>
<link webc:keep rel="stylesheet" href="/assets/common.css" />
<style @raw="this.getCSS(this.page.url)" webc:keep></style>
<webc:keep>
<script async defer src="//foo.bar.baz/foo.js"></script>
</webc:keep>
</head>
<body @html="this.content" webc:nokeep></body>
<script type="module" @raw="this.getJS(this.page.url)" webc:keep></script>
</html>
I've tried pasting components from other projects and they fail in the same way consistently. The only thing that seems to fix it is downgrading to eleventy v2.
My gut feeling is that this has more to do with 11ty/webc itself. Debugging turned out to be waaaay over my head, but I'm happy to do some testing/troubleshoot if that helps!
