Focusing on a heading nested under a link doesn't render a blue outline in Chrome

[NazimHAli]

Expected behavior
A blue outline on focus. Works correctly in Firefox:

Actual behavior
There's no blue outline on focus

Steps to reproduce the issue

Reproducible in Chrome, but not on Firefox:

1. In Chrome, visit https://pharos.jstor.org/storybooks/wc/iframe.html?id=components-link--visited-link-heading&viewMode=story
2. Press tab until it focuses on the link
3. There's no blue outline on focus

Pharos version
12.17.0

Your environment

• Browser: Chrome
• Version: 109.0.5414.119
• Browser: Safari
• Version: 15.6.1 (17613.3.9.1.16)

[chrisjbrown]

did some digging and came up empty 😅
same issue it seems in Safari.

I do see the correct styles being added to the #link-element when programmatically selecting it. but for whatever reason it's not shown 😕

[NazimHAli]

did some digging and came up empty 😅 same issue it seems in Safari.

I do see the correct styles being added to the #link-element when programmatically selecting it. but for whatever reason it's not shown 😕

I looked into it and found the issue to be not rendering the layout, so we just need to update the display. I will open a PR once I'm able to.

[NazimHAli]

Additional findings from research/experimentation for future reference:

• From a styling perspective, it would be ideal to be able to style nested slots
• Currently we're not able to because it depends on open issues CSS selector to style slots with slotted elements WICG/webcomponents#936 and [selectors] Pseudo-class to indicate when a slot has content w3c/csswg-drafts#6867

[daneah]

We should consider how this is impacted as we think about using :focus-visible (#175)