The Hidden Power of Custom States For Web Components
<p>In my previous articles “<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>” and “<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>”, I wrote about the <code>ElementInternals</code> 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 <code>states</code> property of <code>ElementInternals</code> returns a <code>CustomStateSet</code> 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 <code>:checked</code> pseudo-class</p>
<p><a href="https://itnext.io/the-hidden-power-of-custom-states-for-web-components-dcae5b048e20">Click Here</a></p>