search

stencil-community / stencil-router

A simple router for Stencil apps and sites
https://stenciljs.com/
MIT License
188 stars 55 forks source link

Can't style anchor link when used in shadow false, but scoped true #115

Closed adam-rocska closed 11 months ago

adam-rocska commented 4 years ago

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@21GramConsulting/website@0.0.1 /Users/rocskaadam/src/21gram.consulting/src/website
└── @stencil/core@1.17.3

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior: Can't apply class(es) to a stencil-route-link when it's used within a component that's:

shadow  : false,
scoped  : true

Expected behavior: I want to be able to inject anchor styling (for example removal of the underline text-decoration) even when within a non-shadow but force-scoped component.

Steps to reproduce:

  1. Create a new Stencil component
  2. Configure it to shadow:false scoped:true and use a styleUrl OR styleUrls.
  3. Use the <stencil-route-link> component as is, url, and other props don't matter.
  4. Set the anchorClass prop value to a class in your component-related stylesheet.
  5. Load the page

Expected phenomenon : the class's styling is applied. Actual phenomenon : the class's styling is NOT applied.

Other information: We have a solid understanding on the root cause of the issue, and several ideas to fix it. If it's okay, we can contribute to the stencil-router library to fix the issue, or wait for the fix from the official ionic team.

adam-rocska commented 4 years ago

For the time being, if anyone else faces the same issue, here's a SUPER DIRTY and NOT RECOMMENDED unstable workaround:

Copy, and paste the Stencil Generated Additional Class that's responsible for scoping into the anchor:

<stencil-route-link url={link} anchorClass="my-class sc-parent-component-class">
  ....

This approach is not recommended, and not stable because technically the auto-generated class name could potentially change at any time (though it is standard stencil build behavior, and it's unlikely).

It's good enough to fight fire & deploy, but don't lay back as if the "problem's solved".