pch/_micreactulus.js

## _micreactulus.js
function initComponent(root, goDeep = true) {
  const component = root.dataset.component;
  const targets = {};
  const state = {};

  root.querySelectorAll(`[data-${component}-target]`).forEach((attr) => {
    targets[attr.getAttribute(`data-${component}-target`)] = attr;
  });

  Array.from(root.attributes).forEach((attr) => {
    const match = attr.name.match(/data-component-state-([a-z0-9]+)/);
    if (match) {
      state[match[1]] = JSON.parse(attr.nodeValue);
    }
  });

  window[component]({ root, targets, state });

  if (!goDeep) return;

  root.querySelectorAll("[data-component]").forEach((el) => {
    initComponent(el, false);
  });
}

function setState(root, state) {
  for (const [key, value] of Object.entries(state)) {
    root.setAttribute(`data-component-state-${key}`, JSON.stringify(value));
  }

  initComponent(root);
}

function main() {
  const page = document.querySelector("[data-component=page]");
  if (page) {
    initComponent(page);
  }
}

document.addEventListener("DOMContentLoaded", (event) => {
  main();
});

// Components
// ----------------------------------------------------------------------------
function page({}) {
  document.querySelectorAll("pre code").forEach((el) => {
    hljs.highlightElement(el);
  });
}

function section({ root, targets, state }) {
  const { toggle } = targets;
  const { collapsed } = state;

  toggle.onclick = () => {
    setState(root, { ...state, collapsed: !collapsed });
  };
}

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="page-wrapper" data-component="page">
      <main class="page-content">
        <div class="sections">
          <section
            class="section"
            data-component="section"
            data-component-state-collapsed="true"
          >
            <header class="section__header">
              Section 1
              <button class="section__toggle-btn" data-section-target="toggle">
                Toggle
              </button>
            </header>

            <div class="section__content" data-section-target="content">
              Content
            </div>
          </section>

          <section
            class="section"
            data-component="section"
            data-component-state-collapsed="true"
          >
            <header class="section__header">
              Section 2
              <button class="section__toggle-btn" data-section-target="toggle">
                Toggle
              </button>
            </header>

            <div class="section__content" data-section-target="content">
              Content
            </div>
          </section>
        </div>
      </main>
    </div>
  </body>
</html>

## styles.css
[data-section-target="content"] {
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}

[data-component="section"][data-component-state-collapsed="false"] {
  background: var(--background-color-accent-3);
}

[data-component="section"][data-component-state-collapsed="true"]
  [data-section-target="content"] {
  max-height: 0px;
}

[data-component="section"][data-component-state-collapsed="false"]
  [data-section-target="content"] {
  max-height: 1000px;
}
	function initComponent(root, goDeep = true) {
	const component = root.dataset.component;
	const targets = {};
	const state = {};

	root.querySelectorAll(`[data-${component}-target]`).forEach((attr) => {
	targets[attr.getAttribute(`data-${component}-target`)] = attr;
	});

	Array.from(root.attributes).forEach((attr) => {
	const match = attr.name.match(/data-component-state-([a-z0-9]+)/);
	if (match) {
	state[match[1]] = JSON.parse(attr.nodeValue);
	}
	});

	window[component]({ root, targets, state });

	if (!goDeep) return;

	root.querySelectorAll("[data-component]").forEach((el) => {
	initComponent(el, false);
	});
	}

	function setState(root, state) {
	for (const [key, value] of Object.entries(state)) {
	root.setAttribute(`data-component-state-${key}`, JSON.stringify(value));
	}

	initComponent(root);
	}

	function main() {
	const page = document.querySelector("[data-component=page]");
	if (page) {
	initComponent(page);
	}
	}

	document.addEventListener("DOMContentLoaded", (event) => {
	main();
	});

	// Components
	// ----------------------------------------------------------------------------
	function page({}) {
	document.querySelectorAll("pre code").forEach((el) => {
	hljs.highlightElement(el);
	});
	}

	function section({ root, targets, state }) {
	const { toggle } = targets;
	const { collapsed } = state;

	toggle.onclick = () => {
	setState(root, { ...state, collapsed: !collapsed });
	};
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	</head>
	<body>
	<div class="page-wrapper" data-component="page">
	<main class="page-content">
	<div class="sections">
	<section
	class="section"
	data-component="section"
	data-component-state-collapsed="true"
	>
	<header class="section__header">
	Section 1
	<button class="section__toggle-btn" data-section-target="toggle">
	Toggle
	</button>
	</header>

	<div class="section__content" data-section-target="content">
	Content
	</div>
	</section>

	<section
	class="section"
	data-component="section"
	data-component-state-collapsed="true"
	>
	<header class="section__header">
	Section 2
	<button class="section__toggle-btn" data-section-target="toggle">
	Toggle
	</button>
	</header>

	<div class="section__content" data-section-target="content">
	Content
	</div>
	</section>
	</div>
	</main>
	</div>
	</body>
	</html>
	[data-section-target="content"] {
	overflow: hidden;
	transition: max-height 0.4s ease-in-out;
	}

	[data-component="section"][data-component-state-collapsed="false"] {
	background: var(--background-color-accent-3);
	}

	[data-component="section"][data-component-state-collapsed="true"]
	[data-section-target="content"] {
	max-height: 0px;
	}

	[data-component="section"][data-component-state-collapsed="false"]
	[data-section-target="content"] {
	max-height: 1000px;
	}