Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Scoped styling in nested WebC layouts #89

Open
hasanhaja opened this issue Sep 3, 2023 · 1 comment
Open

Scoped styling in nested WebC layouts #89

hasanhaja opened this issue Sep 3, 2023 · 1 comment

Comments

@hasanhaja
Copy link

I think I might be misunderstanding how WebC scoped layouts work. I've not had any issues building and nesting WebC components with scoped styles, but the moment I do this with a layout it breaks. This is what I'm trying to do:

Base layout: layout.webc

<!doctype html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="generator" :content="eleventy.generator">
    <title @html="this.title ? `@hasanhaja | ${this.title}` : '@hasanhaja'"></title>
    <meta name="color-scheme" content="dark light">
    <link rel="stylesheet" href="layout.css">

    <style @raw="getBundle('css')" webc:keep></style>
    <script @raw="getBundle('js')" webc:keep></script>
  </head>
  <body>
    <site-header></site-header>
    <main @html="this.content"></main>
    <footer>
      <p>
        <copyright></copyright>
      </p>
    </footer>
  </body>
</html>

Nested layout: info.webc

---
layout: layouts/layout.webc
---
<div class="container">
  <h1 @html="this.displayTitle"></h1>
  <article @html="this.content"></article>
<div>

<style webc:scoped>
  .container {
    padding: 1rem;
  }
</style>

Content: picks.md

---
layout: layouts/info.webc
title: Picks
displayTitle: My top picks
---

## Title

Content goes here

Error:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble writing to "_site/picks/index.html" from "./src/picks.md" (via EleventyTemplateError)
[11ty] 2. Could not find any top level <style webc:scoped> in component: ./src/_includes/layouts/info.webc (via Error)

This worked when I used to have styles scoped to layout.webc. It's only the nested version that doesn't want to play ball.
@hasanhaja
Copy link
Author

Am I right in thinking that in normal webc usage, the style scoped to the parent is also applied to the children? If that's the case, this could just be something that's documented because I don't think it makes sense to have scoped styling at the level of layouts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@hasanhaja