Matthew Miner's Basic-ish BlogMatthew Miner's Blog

Sometimes I might say something

How to Scope CSS by Moving an Element to the Shadow DOM

PROGRAMMING WEB DEVELOPMENT HTML CSS JAVASCRIPT SHADOW DOM TECH
Bakura demonstrating how to banish things to the shadow DOM in Yu-Gi-Oh!

(tl;dr: Jump to the actual moving)

Scope is an important concept in programming. It allows you to just write small sections of code to do what you need them to do without having to worry about something else in your code using the same name and messing everything up. Declarations (such as of variables or functions) will only be visible to code also in the same scope, usually some block of code.

MDN has a good example of the effects of scope in Javascript:

let x = 1;
if (x === 1) {...

Continue Reading…