Scope styling anchor elements rendered from <Link>

[angelovdev]

Qwik Version

0.12.1 / 0.0.118

Operating System (or Browser)

Linux

Node Version (if applicable)

19

Which component is affected?

Qwik City

Expected Behaviour

<Link href="/">
    <img src="/icon.svg" /> 
</Link>

inside a component that uses useStylesScoped$ with this CSS

a {
  display: flex;
}

renders this scoped CSS:

a.⭐️rwl3jt-0 {
  display: flex;
}

Anchor tags should have a scoped class applied and the anchor element should get a display: flex;

<a href="/" preventdefault:click="" on:click="..." on:mouseover="..." on:qvisible="..." q:id="9" class="⭐️rwl3jt-0">
  <!--qv q:s q:sref=8 q:key=-->
    <img src="/icon.svg" class="⭐️rwl3jt-0">
  <!--/qv-->
</a>

Actual Behaviour

<Link href="/">
    <img src="/icon.svg" /> 
</Link>

inside a component that uses useStylesScoped$ with this CSS

a {
  display: flex;
}

renders this scoped CSS:

a.⭐️rwl3jt-0 {
  display: flex;
}

There is no class applied to the anchor rendered from the Link component and the anchor does not get the styles:

<a href="/" preventdefault:click="" on:click="..." on:mouseover="..." on:qvisible="..." q:id="9">
  <!--qv q:s q:sref=8 q:key=-->
    <img src="/icon.svg" class="⭐️rwl3jt-0">
  <!--/qv-->
</a>

Additional Information

Other scoped styles work so I assume everything is correctly imported on my side.

[Argeento]

My workaround:

const { scopeId } = useStylesScoped$(styles)

// ...

<Link href="/" class={`⭐️${scopeId} my-class`}> 

[ersinakinci]

My workaround:

const { scopeId } = useStylesScoped$(styles)

// ...

<Link href="/" class={`⭐️${scopeId} my-class`}> 

Just tried this and it works, but you need to omit the ⭐️ because it's already included in scopeId.

So the correct version is:

const { scopeId } = useStylesScoped$(styles)

// ...

<Link href="/" class={`${scopeId} my-class`}> 

[ondratra]

I'm running Qwik version 1.22.5 and the class seems to be applied to my Link.

The following component code:

return (
    <Link ... class="myClass">
        ...
    </Link>
)

generates

<div class="⭐️7os75d-0">
    <a ... class="myClass" ...>
        ...
    </a>
</div>

but the CSS rules are still not applied because they are out of scope

.myClass.⭐️7os75d-0  {...} /* this doesn't affect anchor */

/* in contrast, this CSS rule would take effect, but adds unwanted side effects */
.⭐️7os75d-0 .myClass  {...} /* notice the space */

The workaround mentioned (https://github.com/BuilderIO/qwik/issues/2071#issuecomment-1321285861 + https://github.com/BuilderIO/qwik/issues/2071#issuecomment-1329842062) still works well.

---

One way I can imagine this issue could be solved is to introduce a new parameter to all components that would allow sharing of the current scope:

return (
    <MyComponent shareScope={true}>
        <Link ... class="myClass" shareScope={true}>
            <MyAnotherComponent class="myAnotherClass">
                ...
            </MyAnotherComponent>
        </Link>
    </MyComponent>
)

generating

<div class="⭐️7os75d-0"> <!-- the scope -->
    <div class="⭐️7os75d-0 ⭐️asujq5-0"> <!-- still in the scope + unique scope -->
        <a ... class="⭐️7os75d-0 ⭐️asujq5-0 ⭐️kf31yp-0 myClass" ...> <!-- still in the scope(s) + unique scope -->
            <div class="⭐️vge25l-0 myAnotherClass"> <!-- out of scope -->
                ...
            </div>
        </a>
    </div>
</div>

[literalpie]

I think this is a duplicate of https://github.com/BuilderIO/qwik/issues/1710

[wmertens]

I believe this is no longer an issue, feel free to reopen if it is.