8000 Scope hash is added to all nodes in page mode. · Issue #206 · 11ty/webc · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
Scope hash is added to all nodes in page mode. #206
Open
@ztiromoritz

Description

@ztiromoritz

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0