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.

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

Scope hash is added to all nodes in page mode. #206

Open
ztiromoritz opened this issue Apr 7, 2024 · 1 comment
Open

Scope hash is added to all nodes in page mode. #206

ztiromoritz opened this issue Apr 7, 2024 · 1 comment

Comments

@ztiromoritz
Copy link

ztiromoritz commented Apr 7, 2024

When I use <style webc:scoped="hash"> in a component, the class="hash" will only be applied to the root node.
But on a page it will be set to all nodes.

Example 1:
my-component.webc:

<div webc:root="override">
  <p></p>
</div>
<style webc:scoped="hash">
.test { background: red; }
</style>

transformed with the following code:

let webc = new WebC();
webc.defineComponents("./my-component.webc");
webc.setContent("<my-component></my-component>")
let { html } = await webc.compile();
console.log(html.trim());

Will produce:

<div class="hash"><p></p></div><style>.hash .test { background: red; }</style>

Note that the p tag has no class Attribute.

Whereas, if I use webc:scoped in a page the class attribute will be applied to all nodes.
Example 2:

let webc = new WebC();
webc.setContent("<div><p></p></div><style webc:scoped='hash'>.test { background: red; }</style>");
let {html} = await webc.compile();
console.log(html.trim());

will produce:

<div class="hash"><p class="hash"></p></div><style class="hash">.hash .test { background: red;}</style>

I would expect only the top div to have the class Attribute.

It seems to be connected with the following code pointers:
https://github.com/11ty/webc/blob/v0.11.4/src/ast.js#L384
and
https://github.com/11ty/webc/blob/v0.11.4/src/ast.js#L431
which apply the root attributes including the class attribute to all nodes.

@egnor
Copy link

egnor commented Dec 18, 2024

+1 this was quite surprising

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants