all <li> tags "polutted" with '≫' globally
amir-arad opened this issue · comments
Describe the bug
when I render arwes, all <li> nodes in the document get an li:::before node with content '≫'.
To reproduce
render arwes in a DOM tree containing lists
Expected behavior
don't affect DOM elements outside arwes
- Packages version: 1.0.0-alpha.18
- Node.js 15.11 NPM 7.7.6
- OS: windows
Testing environment
chrome latest on windows
Hi @amir-arad !
The StylesBaseline component adds global styles like this.
For now it is using ::before but we can fix it with ::marker pseudoselector.
If you are open to contribute with a PR, let me know and I can provide some instructions since currently there are no documentation for it.
I can try... CSS is not my strong suit but I've been around it enough.
I expect some standard solution like using an ancestor selector for all the styles ...?
Either that or some other component-friendly CSS namespacing solution
If it is changed to ::marker, it is the browser standard so it can be easily disabled with the CSS rule list-style: none;. Since the idea is to allow to style global (and in the future, scoped) HTML elements without custom components. There is also a List component but it is made for animations.
I can try... CSS is not my strong suit but I've been around it enough.
Since there are no proper contributions instructions, don't worry, I can fix it for next release 😉
I see similar problem with line-height:30px for all inputs. it should be all scoped IMO
@amir-arad , the form elements will be covered later in the roadmap. So yes, there are many details and components to create about that. Thank you for reporting them 😉