I want to be able to apply styles to parts of a web page without them leaking out

Currently, there is no mechanism for one-way encapsulation of styles. In other words, enabling global styles to apply to a portion of a web page, but not allow the styles applied to that portion to bubble up into the page as a whole. Scoped styles, as they were originally conceived, would have solved this, but they seem to have been abandoned in favor of the 2-way encapsulation of the Shadow DOM (no styles "leak" into the component, no styles "leak" out). The Shadow DOM also has a dependency on JavaScript, which should not be necessary for accomplishing style scoping. An alternate proposal, CSS @scope rules has not really progressed since the initial working draft in 2014.

We need to solve this.