search

11ty / eleventy-plugin-webc

Adds support for WebC *.webc files to Eleventy
https://www.11ty.dev/docs/languages/webc/
119 stars 10 forks source link

:host CSS class is duplicated and appended to all children #101

Open paprikka opened 3 weeks ago

paprikka commented 3 weeks ago

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 eleventy@3.0.0-beta.1 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!