Styling elements in the Shadow DOM


by Jeremy Caudle
code

Chris Coyier posted a nifty video on his YouTube channel the other day covering styling elements in the Shadow DOM using CSS custom properties. I wanted to work a bit with it so I can make use of them when I add icons to this site.

View the code:

HTML and JS 
<div>
	
	<svg style="display: none;">
		<symbol id="rect" viewBox="0 0 25 25">
			<rect x="0" y="0" width="100%" height="100%" style="fill: var(--icon-color);" />
		</symbol> 
	</svg>
	
	<svg>
		<use xlink:href="#rect" x="0" y="0" />
	</svg>
	 
	</div>
CSS 
:root {
		--icon-color: red;
	}
	
	svg {
//		border: 1px solid red;
	}

Tags