11ty / 11ty/webc

Scope hash is added to all nodes in page mode.

Open
#206 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.4k
Forks
46
Avg merge
10m
Merged PRs (30d)
2

Description

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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in src/ast.js at the referenced lines 384 and 431, then reproduce both page and component examples from the issue. Confirm that scoped-hash output applies the class only to the page's top-level node, while preserving the component behavior, and verify the change with the project's relevant tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.