Comments (5)
This looks to be a bug with Firefox and ShadowDOM. I have a minimal reproduction here: https://codepen.io/keithamus/pen/abRewMJ. Testing in Chrome and Safari these issue is not reproducible. Firefox Nightly seems to still have this issue.
Specifically I'd look at https://bugzilla.mozilla.org/show_bug.cgi?id=1233594 or perhaps it's worth filing a new issue with Mozilla?
I'm going to close this because it's not something we can easily fix within this component, as it's a broken behaviour with one browser in particular. Let me know if you do file any bugs with Mozilla as I'd be interested to see the progress there.
from relative-time-element.
Okay, yes the first issue seems like a browser bug. The second issue with ::selection
color affects Blink as well:
![image](https://private-user-images.githubusercontent.com/115237/242951613-f42c1159-a7c8-497f-a76d-4c8a65c32fb6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc2MzcwNTksIm5iZiI6MTcxNzYzNjc1OSwicGF0aCI6Ii8xMTUyMzcvMjQyOTUxNjEzLWY0MmMxMTU5LWE3YzgtNDk3Zi1hNzZkLTRjOGE2NWMzMmZiNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYwNlQwMTE5MTlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02ZTRmNWVkMWJjZjVkYzk0NDhhZjVlYTU0ZTJmNDgwYjZjY2Y3ZTA1YzdiODhkMWUzZDM1N2JiNjZhYmM1MDEyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ur6OUfp2a45bbcM-zzp21pMXqTA6bFnIlYhR8yk_bxk)
It's fine in Safari:
![image](https://private-user-images.githubusercontent.com/115237/242951715-f4875f73-988f-4e7e-a599-316271674275.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc2MzcwNTksIm5iZiI6MTcxNzYzNjc1OSwicGF0aCI6Ii8xMTUyMzcvMjQyOTUxNzE1LWY0ODc1ZjczLTk4OGYtNGU3ZS1hNTk5LTMxNjI3MTY3NDI3NS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYwNlQwMTE5MTlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mZDE2MDUwNWJmZjY3YmVmNWQ0YjI4OTQ4MDk5Yjk2ZTkxZDQzOTQxMTA4MDMyM2M4YmEwOWRkYmJlYzA5ODA3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.UtezpNLjRDGSUQ_iDv8TcGRl5-Zvjd3ouqtSWOs87Sw)
What do you think about that one? I guess those two Shadow DOM implementations may differ, but I'm not sure which one is supposed to be correct because I do recall Shadow roots represent a boundary that CSS normally can not cross.
from relative-time-element.
For the first issue, I found this meta bug, so it looks like Mozilla is well aware.
from relative-time-element.
As for the color issue: I conclude it as a Safari bug and Blink and Gecko are likely correct in that they don't let ::selection
style cross the shadow boundary.
Overall, I think ::selection
should be an exception that can cross shadow boundaries, as otherwise elements like this one would have to expose an API to let users define CSS, like a style
attribute which could then be used to append a <style>
node to the shadow root on creation, e.g.
<relative-time style="::selection {background: hotpink}">
from relative-time-element.
I’m inclined to agree that selection should cross shadow roots. I don’t think there’s any mechanism we’d want to introduce in this component, though. It won’t be exclusive to this component and providing a solution to each and every web component seems heavy handed IMO.
I’m surprised this hasn’t come up before. Have you found any issues in Chrome/Safari trackers around these?
from relative-time-element.
Related Issues (20)
- Format attribute does not respect lang HOT 3
- Make `format` API more consistent
- datetime without weekday HOT 2
- Package no longer publishing to NPM? HOT 3
- Not exactly sure of what, but something appears to be wrong?
- Wrong human text HOT 5
- Precision for what to display HOT 3
- The `on` prefix is not localized HOT 3
- Attribute to control which attribute is set for `title` HOT 2
- Enable passing `formatStyle` to Intl.DateTimeFormat HOT 1
- Stray days added to duration HOT 1
- Stricter `datetime` validation HOT 4
- sdfgvb
- Cannot get format=relative to display seconds HOT 2
- "X years ago" is not rounding correctly HOT 3
- Title format is not configurable
- Render 12/24 hour format according to user's preference HOT 4
- precision=day should return "today" instead of "now" HOT 1
- Feb 29th showing as 'yesterday' on March 31 HOT 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from relative-time-element.