TIL: Al usar querySelector(All) desde un elemento es posible usar `:scope` para referirse a ese elemento en el selector de CSS, así podemos usar selectores como `>` para solo obtener hijos directos de nuestro elemento padre

til-querySelectorAll-scope.js

/**
 * Si tenemos este HTML
 * <section id="some-section">
 *   <article> <h2>Article 1</h2> <article>A nested one</article> </article>
 *   <article> <h2>Article 2</h2> <article>A nested one</article> </article>
 *   <article> <h2>Article 3</h2> <article>A nested one</article> </article>
 * </section>
 */
const section = document.querySelector("#some-section");
// Haciendo esto obtenemos seis artículos
section.querySelectorAll("article")
// Usando :scope podemos referencias al section y obtener solo tres
section.querySelectorAll(":scope > article")