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

WebC Components placed in Layout files never render Scoped CSS #35

Closed
khalidabuhakmeh opened this issue Dec 8, 2022 · 4 comments
Closed

WebC Components placed in Layout files never render Scoped CSS #35

khalidabuhakmeh opened this issue Dec 8, 2022 · 4 comments
Labels
bug Something isn't working duplicate This issue or pull request already exists education

Comments

@khalidabuhakmeh
Copy link

The scoped CSS never makes it to the page when attempting to render a WebC component in a liquid layout. I've included a recreation of this issue in this repository. https://github.com/khalidabuhakmeh/eleventy-two-oh/tree/webc-layout-issue.

Layout.liquid

---
title: Khalid's Super Possum Site
---
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- minify -->
    <link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet"/>
    <link href="/css/style.css" rel="stylesheet"/>
    <title>{{ title }}</title>
    <style>{{ page.url | webcGetCss }}</style>
</head>

<header class="sticky">
    <div class="container">
        <div class="nav-brand">
            <a href="/">
                <h1>{{ title }}</h1>
            </a>
        </div>
    </div>
</header>

<body id="nescss">
<main class="container main-content">

    {% renderTemplate "webc" %}
    <twitter-share></twitter-share>
    {% endrenderTemplate %}


    {{ content }}
</main>
<script type="module">{{ page.url |  webcGetJs }}</script>
<script type="module" src="/js/site.ts"></script>
</body>
</html>

WebC Component

<button type="button" class="nes-btn">
  <i class="nes-icon twitter"></i>
  Share Tweet
</button>

<script>
window.customElements.define("twitter-share", class extends HTMLElement {
  connectedCallback() {
    let btn = this.querySelector(':scope button');
    btn.addEventListener('click', () => {
      alert('sharing drama on Twitter!')
    })
  }
})
</script>

<style lang="css" webc:scoped>
:host button {
    color: firebrick;
}
</style>

Index.liquid

---
layout: layout.liquid
---

<h1> {{ title }} </h1>

<p>I want to say something right now</p>

<ul class="nes-list is-disc">
    {% for possum in possums %}
        <li>
            <a href="{% possum_link possum.slug %}">
                {{ possum.name }}
            </a>
        </li>
    {% endfor %}
</ul>

Resulting HTML

Note that the style tag is missing the scoped css of the webc component, even though the component has a unique styling class of wpwyzh6rm.

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- minify -->
    <link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet"/>
    
    <title>Khalid's Super Possum Site</title>
    <style></style>
  <script type="module" crossorigin src="/assets/index.6a88663f.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/site.24fa2b8c.js">
  <link rel="stylesheet" href="/assets/site.af47e5c2.css">
</head>

<header class="sticky">
    <div class="container">
        <div class="nav-brand">
            <a href="/">
                <h1>Khalid's Super Possum Site</h1>
            </a>
        </div>
    </div>
</header>

<body id="nescss">
<main class="container main-content">

    <twitter-share class="wpwyzh6rm"><button type="button" class="nes-btn">
  <i class="nes-icon twitter"></i>
  Share Tweet
</button>





</twitter-share>
    


    
<h1> Khalid's Super Possum Site </h1>

<p>I want to say something right now</p>

<ul class="nes-list is-disc">
    
        <li>
            <a href="/possums/fluffy/">
                Fluffy
            </a>
        </li>
    
        <li>
            <a href="/possums/snugglepants/">
                Snugglepants
            </a>
        </li>
    
        <li>
            <a href="/possums/lord-featherbottom/">
                Lord Featherbottom
            </a>
        </li>
    
        <li>
            <a href="/possums/pennywise/">
                Pennywise
            </a>
        </li>
    
</ul>
</main>


</body>
</html>
@pauleveritt
Copy link

Tangent: we tried to do a StackBlitz on this but usage of the Liquid tag in the layout caused a base64 (of all things) error.

@zachleat
Copy link
Member

zachleat commented Dec 9, 2022

@pauleveritt I did attempt to fix a StackBlitz base64url error for WebC awhile back and was unsuccessful! Did you receive a different error? 11ty/webc#56

@pauleveritt
Copy link

Here's what we got:

[11ty] 1. Having trouble writing to "_site/index.html" from "./index.md" (via EleventyTemplateError)
[11ty] 2. Unknown encoding: base64url, file:./_includes/layout.liquid, line:6, col:5 (via RenderError)
[11ty] 3. Unknown encoding: base64url (via TypeError)
[11ty] 
[11ty] Original error stack trace: TypeError: Unknown encoding: base64url
[11ty]     at Uint8Array.slowToString (https://nodexbrseu-vglf.w-credentialless.staticblitz.com/blitz.8cf5a3c77f45c942df800a39619ec49fff7e5814.js:6:262381)
[11ty]     at Buffer.toString (https://nodexbrseu-vglf.w-credentialless.staticblitz.com/blitz.8cf5a3c77f45c942df800a39619ec49fff7e5814.js:6:268277)
[11ty]     at _0x224a84 (https://nodexbrseu-vglf.w-credentialless.staticblitz.com/blitz.8cf5a3c77f45c942df800a39619ec49fff7e5814.js:15:90667)
[11ty]     at _0x32ced8.digest (https://nodexbrseu-vglf.w-credentialless.staticblitz.com/blitz.8cf5a3c77f45c942df800a39619ec49fff7e5814.js:15:222983)
[11ty]     at Hash.digest (https://nodexbrseu-vglf.w-credentialless.staticblitz.com/blitz.8cf5a3c77f45c942df800a39619ec49fff7e5814.js:6:933735)
[11ty]     at AstSerializer.getScopedStyleHash (file://file:///home/projects/node-xbrseu/node_modules/@11ty/webc/src/ast.js:382:25)
[11ty]     at AstSerializer.preparseComponent (file://file:///home/projects/node-xbrseu/node_modules/@11ty/webc/src/ast.js:548:30)
[11ty]     at async Promise.all (index 0)
[11ty]     at async WebC.setup (file://file:///home/projects/node-xbrseu/node_modules/@11ty/webc/webc.js:228:3)
[11ty]     at async Object.eval (file:///home/projects/node-xbrseu/node_modules/@11ty/eleventy-plugin-webc/src/eleventyWebcTemplate.js:128:17)

@zachleat zachleat mentioned this issue Dec 9, 2022
Open
@zachleat
Copy link
Member

I think this is a duplicate of #33, which shipped with WebC v0.8.0.

Related edge case: #46 (already fixed for WebC v0.9.0)

@zachleat zachleat added duplicate This issue or pull request already exists education bug Something isn't working labels Feb 22, 2023
zachleat added a commit that referenced this issue Feb 22, 2023
@zachleat
Test for #35
56604ae
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working duplicate This issue or pull request already exists education
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@zachleat @khalidabuhakmeh @pauleveritt