Ignoring Elements

Often, using browser native features or manual DOM manipulation scripts is easier than managing every aspect of a UI in a signal().

For example, the details and summary elements provide browser-native disclosure functionality without any JavaScript.

let name = signal('friend');

function template () {
	return `
		<h1>Hello ${name.value}</h1>
		<details>
			<summary><strong>Tap me to open</strong></summary>
			I'm open now!
		</details>`;
}

When a details element is expanded, it has an [open] attribute on it. If someone interacted with that element to expand it, and then a render event happened, Reef would notice the [open] attribute not present in the template and remove it, collapsing it.

You can prevent Reef from diffing an element by adding the [reef-ignore] attribute.

let name = signal('friend');

function template () {
	return `
		<h1>Hello ${name.value}</h1>
		<details reef-ignore id="disclosure">
			<summary><strong>Tap me to open</strong></summary>
			I'm open now!
		</details>`;
}

Reef will still render the element, but it won’t modify any attributes or content after its initially rendered into the UI.

Try ignoring elements on CodePen →