Scope JavaScript and CSS with the Web Platform

Built-in scoping

JavaScript frameworks offer solutions to ensure the code you are writing only affects the areas of the application that you want it to. CSS @scope support has recently arrived in Safari 17.4. By using custom elements and @scope, developers can now take advantage of scoping built directly into the platform.

JavaScript

Use custom elements to scope JavaScript to a specific element. this allows you to query only within the element. You can do this with regular elements as well, but custom elements provide a nice declarative barrier during authoring.

<script>
	customElements.define(
		"my-custom-element",
		class extends HTMLElement {
			connectedCallback() {
				const div = this.querySelector("div");

				div.textContent; // "Inside"
			}
		},
	);
</script>

<div>Outside</div>

<my-custom-element>
	<div>Inside</div>
</my-custom-element>

CSS

Styles within @scope apply to the parent element and children.

<div>Not styled</div>

<my-custom-element>
	<div>Styled</div>
	<style>
		@scope {
			div {
				color: green;
			}
		}
	</style>
</my-custom-element>