The Hidden Power of Custom States For Web Components

<p>In my previous articles &ldquo;<a href="https://javascript.plainenglish.io/web-components-can-now-be-native-form-elements-107c7a93386" rel="noopener ugc nofollow" target="_blank">Web Components Can Now Be Native Form Elements</a>&rdquo; and &ldquo;<a href="https://itnext.io/native-form-validation-of-web-components-a599e85176c7" rel="noopener ugc nofollow" target="_blank">Native Form Validation Of Web Components</a>&rdquo;, I wrote about the&nbsp;<code>ElementInternals</code>&nbsp;property that enables Custom Elements to be associated with a form.</p> <p>This interface also enables developers to associate custom states with Custom Elements and style them based on these states.</p> <p>The&nbsp;<code>states</code>&nbsp;property of&nbsp;<code>ElementInternals</code>&nbsp;returns a&nbsp;<code>CustomStateSet</code>&nbsp;that stores a list of possible states for a Custom Element to be in, and allows states to be added and removed from the set.</p> <p>Each state in the set is represented by a string that has the same form as a CSS Custom Property, namely<code>--mystate</code>.</p> <p>These states can then be accessed from CSS with the custom state pseudo-class in the same way that built-in states can be accessed.</p> <p>For example, a checkbox that is checked can be accessed from CSS using the built-in&nbsp;<code>:checked</code>&nbsp;pseudo-class</p> <p><a href="https://itnext.io/the-hidden-power-of-custom-states-for-web-components-dcae5b048e20">Click Here</a></p>