MarkBoots Posts - Answer Overflow

MarkBoots

•Created by MarkBoots on 11/1/2024 in #front-end

Set Child count + index of child with custom properties

Would like your opinions, Because i like to play with the styling of an element based on it's index within a parent (and to be able to calculate with it) , normally i would setup custom properties manually with the nth-child selector or as inline style within the html element. Unfortunately CSS is not able (yet) to do it on it's own. I was thinking of doing it programmatically (JS) on page load and with an observer to keep it up to date. What do you think of this approach?

<ul data-set-count-props="listA">
  <li>Item A</li>
  <li>Item B</li>
</ul>

<ul data-set-count-props="listB">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul data-set-count-props="listA">
  <li>Item A</li>
  <li>Item B</li>
</ul>

<ul data-set-count-props="listB">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

// Function to set count and index based on the custom property name
function setCountProps(el) {
  const propName = el.dataset.setCountProps;
  const children = el.querySelectorAll(':scope > *');

  // Set the count on the parent element
  el.style.setProperty(`--${propName}-count`, children.length);

  // Set the index on each child element using the custom property name
  children.forEach((child, index) => {
    child.style.setProperty(`--${propName}-index`, index);
  });
}

// Initialize on page load
document.querySelectorAll('[data-set-count-props]').forEach(el => {
  setCountProps(el);

  // Set up MutationObserver for each individual element
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.type === 'childList') {
        setCountProps(mutation.target); // Reapply properties when children change
      }
    });
  });

  observer.observe(el, { childList: true });
});

// Function to set count and index based on the custom property name
function setCountProps(el) {
  const propName = el.dataset.setCountProps;
  const children = el.querySelectorAll(':scope > *');

  // Set the count on the parent element
  el.style.setProperty(`--${propName}-count`, children.length);

  // Set the index on each child element using the custom property name
  children.forEach((child, index) => {
    child.style.setProperty(`--${propName}-index`, index);
  });
}

// Initialize on page load
document.querySelectorAll('[data-set-count-props]').forEach(el => {
  setCountProps(el);

  // Set up MutationObserver for each individual element
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.type === 'childList') {
        setCountProps(mutation.target); // Reapply properties when children change
      }
    });
  });

  observer.observe(el, { childList: true });
});