Support static attributes in component() definition

[megheaiulian]

Problem

Many pionjs components need to set static attributes on the host element (e.g. role="group", role="navigation"). Currently, the only way to do this is via a useEffect:

useEffect(() => {
    host.setAttribute('role', 'group');
}, []);

This is boilerplate for what is really a declaration — the attribute never changes and never triggers a re-render.

Proposal

Add a staticAttributes option to the component() definition:

component(CzBadgeFilterBar, {
    styleSheets: [style],
    observedAttributes: ['value'],
    staticAttributes: { role: 'group' },
});

These would be set once on the host element during creation and never observed or re-rendered.

Distinction from observedAttributes

• observedAttributes — reactive, triggers re-render on change (e.g. value, items)
• staticAttributes — set once, never re-render, declarative intent (e.g. role, default tabindex)

Benefits

• Removes useEffect boilerplate for one-time attribute setup
• Makes the component's static semantics explicit in the definition
• Clear separation between reactive and static attributes
• Common pattern: every group-like component needs role, landmarks need role + potential aria-* defaults, etc.