nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Add style to dynamically added calcite-accordion-item header

GregoryBologna

I am adding style to an accordion item, but when the calcite-accordion-item is first added to the calcite-accordion container, the shadowRoot ".header" is not available yet. What is another way to add style to this?

Accordion item not styled until shadowRoot is ready.

Accordion item styled.

Only works when shadowRoot is built.

document.querySelectorAll('calcite-accordion-item').forEach((node) => {
	let el = node.shadowRoot.querySelector('.header');
	if (el) {
		el.style.setProperty('background-color', 'rgb(27, 54, 93)');
		el.style.setProperty('border', '1px solid rgb(23, 134, 180)');
		// add bottom margin
		el.style.setProperty('margin-bottom', '2px');
	}
	el = node.shadowRoot.querySelector('.heading');
	if (el)
		el.style.setProperty('color', 'rgb(255, 200, 69');
});

Find more posts tagged with

Accepted answers

KittyHurley

Apologies, thought you were using a custom-defined header class, and not the component's header class.

Since it is part of the Shadow DOM, the header class' markup structure, style, and behavior is hidden and separated through encapsulation.

The Shadow DOM hides and separates a portion of the component's DOM elements, so they are rendered in the browser, but cannot be modified by you. The encapsulation creates persistent styling across your applications that won't conflict or compete with other sources. Also, enabling your users to have a consistent user experience.

That being said, we have an open enhancement request to expose the CSS variable for styling that could be incorporated in the future. Just linked the request to this Community thread so the team is aware of usage and intent to assist in prioritizing the enhancement. If you have a specific use case, please do add any comments to the issue for additional context as well.

All comments

KittyHurley

Great question, we'll be providing documentation on this in the very near future on the ArcGIS Developers site.

Some background context for why the content isn't available with the above code:

Calcite Components must hydrate before their properties can be initialized. The component starts as a plain HTML element, and is upgraded as soon as their implementation is loaded and defined in the browser. To await for hydrated components using JavaScript, you can use the whenDefined() method of the customElementRegistry interface, which returns a Promise when the specified element is defined.

Here's a Codepen with a working example, and a JavaScript code snippet below:

(async () => {
  await customElements.whenDefined("calcite-accordion-item");
  await document.querySelectorAll("calcite-accordion-item").forEach((node) => {
    node.style.setProperty("background-color", "rgb(27, 54, 93)");
    node.style.setProperty("border", "1px solid rgb(23, 134, 180)");
    // add bottom margin
    node.style.setProperty("margin-bottom", "2px");
    node.style.setProperty("color", "rgb(255, 200, 69");
  });
})();

GregoryBologna

Thanks, Kitty. I'm not familiar with CustomElementRegistry. You have given me something new to read tonight! The codepen was helpful. Though .header is still not available.

KittyHurley

Apologies, thought you were using a custom-defined header class, and not the component's header class.

Since it is part of the Shadow DOM, the header class' markup structure, style, and behavior is hidden and separated through encapsulation.

GregoryBologna

Access to header and even title would be great. I'll keep an eye on this open enhancement group. Is my original code fragment bad practice? It does style the header once the accordion item is rendered...or is that just by accident? I'll try using the styling in your fragment above and find a color that isn't so dark when the accordion is expanded. That will be fine as long as the accordion item stands out for the user. Thanks.

GregoryBologna

Here's my solution until\if header is exposed later on. Thank you, Kitty.

const delay = (ms) => {
	return new Promise(resolve => setTimeout(resolve, ms));
};

/**
 * TODO: When Esri adds this feature, add style at create time
 * Expose CSS variable to style accordion item header in active state #4060
 * https://github.com/Esri/calcite-components/issues/4060
 * @param {*} id 
 */
const styleAccordionItem = async () => {
	await customElements.whenDefined("calcite-accordion-item");
	await delay(125);
	let node = document.querySelector(`#${activeDataAccordionItem}`);
	if (node) {
		let el = node.shadowRoot.querySelector('.header');
		if (el) {
			el.style.setProperty('background-color', 'rgb(27, 54, 93)');
			el.style.setProperty('border', '1px solid rgb(23, 134, 180)');
			// add bottom margin
			el.style.setProperty('margin-bottom', '2px');
		}
		el = node.shadowRoot.querySelector('.heading');
		if (el)
			el.style.setProperty('color', 'rgb(255, 200, 69');
	}
};

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.