Editing svg #shadow-root content
I have an svg that has #shadow-root content that houses a down arrow with a fill on it. See images.
I want to edit this fill to make it transparent, but I do not have access to the html. The only way I can think of is removing the element from the dom and adding in the same element html without the fill. Is there a better way?
48 Replies
the fill is currentColor so you can just change the svg {color:;}
o the circle is not though
gg
Yea sorry should have worded it better 😅
I mean you had it highlighted I just am bad with screen shots
I just realized even with JS I can't see the shadow root so I don't even think this is possible lol
All I get spitting out the html :(
<use xlink:href="#chevron-down"></use>yea its a sprite with one icon lol
I guess I could hardcode the HTML from the DOM in a variable and then just replace it
what is the source?
this part of some component you don't have control of?
That doesn't work with shadow DOM
Yea from what I remember, the codebase has their svgs setup so they're reusable so it does this shadow dom thingy but yea I don't have access to the entire codebase. I just make edits via the page builder and add inline css and js to add custom styles haha
why would anyone do this then
all sounds stupid af
Do what?
sprite with one icon... shadowdom no point if you can't use stuff like currentColor
I don't remember how it's setup in the codebase but it is really nice how they have it, so you can just do something like <svg #arrow> and it replaces it with the arrow svg paths
custom sprite with custom props and fallbacks ❤️ i.e.
fill="var(--svg-fill, currentColor)"
https://icones.js.org/ bag em and tag em
few edits and wala<use> is basically SVG's <img> it allows you to load a file in as content. When that file is svg, it creates a shadow dom fragment to display the svg content.
There's no benefit that I know of of using <use> over <img> so I don't know why they chose it.
Custom props don't propagate in shadow DOM
listen I do both all the time
So don't tell me I can't with <use>
Shadow DOM is basically a parallel dimensions you can only interact with via JS and some css pseudo classes
you can also set the styles to the element itself
this is not factual
least not really
How so?
because its very wrong
they are so far from the same thing
Can you be... More specific maybe ? XD
there is all the benifit of doing <use> over <img src>
for one its still a <svg> that way and yes you can use custom props and current color to effect them
And it's not meant to be fact, I said that I didn't knew any benefit of using one over the other
let me find example..
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
what jochem said works
https://github.com/b1mind/bfolio/blob/dev/src/lib/component/SocialIcons.svelte
I do it for my social icons
thought I ahd a codepen but cant find it
HOW MANY SPACES DO YOU USE FOR TABS ?!
Because the element is from the same file, it doesn't get the --x from the svg use, but directly via the symbol.
thats your default not mine
I use 1 tab (2spaces) for everything
i can't test a different file
Oh yea this
Check your GH account settings, you can customize it there, it defaults to HTML's 8 space
also people that use .svg in a <img src=""> are crazy
that part you are not wrong no point 🤣
ok mine don't show as shadow dom though :think:
also I never remember them ever doing that so
thats web component shit no?
Idk but here's my amazing solution
ah the repaints
but you do what you gotta do
you don't understand how many of these we have that are inline
even worse perf then xD
We easily have 10k lines of css and js in <style> and <script> tags added by overrides
and the js is all dom manipulation on the client
that makes me kinda whooozy
why not just have a better DOM solution
Sounds like w/e yall using sux ass
It's a closed-source cms we're using that (i think) is built off of Spring Boot and they didn't really do any knowledge transfers... and the documentation is really bad. The client stuff isn't too bad but it's not really clear how or where to add overrides since everything is just built as a module... so when you have a whole new page where each module needs something custom... like do we just make another module for it? But then we're really just moving the tech debt around (rather than override, creating a random 'custom' module for it) you know
So it's just easiest to add it as an override within the application backend area rather than the codebase
Then you could make the argument of 'well the modules should be more flexible' yea you're right but I have no idea how to do any of that within their codebase / with Java 😂
Sounds like a BE dev lead made all the "right" choices
"oh look with this we will never have to mess with css/html"
then its just a nightmare when you do (which is always)
Lol the third party company that owns the cms made the website which is the issue and precisely why the documentation sucks... the documentation is for really basic stuff on their website not the custom stuff they built. so of course if they built it they want to charge extremely high fees to fix it / make custom stuff
which is where i come in. instead of paying that company 200-300 an hour they pay me like 1/4 of that
xD