ਇਹ ਐਕਸੈਸਿਬਲ ਵੈੱਬ ਕੰਪੋਨੈਂਟਸ ਬਣਾਉਣ ਲਈ ਇੱਕ ਗਾਈਡ ਹੈ ਤੁਸੀਂ ਅਜਿਹੇ ਵੈੱਬ ਕੰਪੋਨੈਂਟਸ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜੋ ਵਧੀਆ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਨ ਅਤੇ ਐਕਸੈਸਿਬਲ ਹੋਣ। ਇਸ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਨ ਲਈ ਇੱਥੇ ਇੱਕ ਗਾਈਡ ਹੈ।
- ਇੱਕ ਰੀਯੂਜ਼ੇਬਲ ਵੈੱਬ ਕੰਪੋਨੈਂਟ ਬਣਾਓ ਜੋ ਇੱਕ ਸਾਫ਼ API ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੋਵੇ।
- ARIA ਐਟਰੀਬਿਊਟਸ ਅਤੇ ਕੀਬੋਰਡ ਸਪੋਰਟ ਨਾਲ ਐਕਸੈਸਬਿਲਟੀ ਯਕੀਨੀ ਬਣਾਓ।
- Shadow DOM ਅਤੇ ਲੇਜ਼ੀ ਰੈਂਡਰਿੰਗ ਨਾਲ ਪਰਫਾਰਮੈਂਸ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਓ।
- ਕਿਸੇ ਫਰੇਮਵਰਕ 'ਤੇ ਨਿਰਭਰ ਕੀਤੇ ਬਿਨਾਂ ਥੀਮਿੰਗ ਅਤੇ ਰਿਸਪੌਂਸਿਵਨੈੱਸ ਪ੍ਰਦਾਨ ਕਰੋ।
- ਲੋਕਲ ਰਨ ਕਰਨ ਲਈ ਟੈਸਟ ਅਤੇ ਇੱਕ ਛੋਟਾ ਬਿਲਡ ਸੈੱਟਅੱਪ ਸ਼ਾਮਲ ਕਰੋ।
ਮੁੱਖ ਨਤੀਜੇ:
- ਇੱਕ ਡ੍ਰੌਪ-ਇਨ ਪ੍ਰੋਫਾਈਲ-ਕਾਰਡ ਵੈੱਬ ਕੰਪੋਨੈਂਟ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਕਈ ਐਪਸ ਵਿੱਚ ਵਰਤ ਸਕਦੇ ਹੋ।
- ਕੰਪੋਨੈਂਟ ਲੌਜਿਕ, ਸਟਾਈਲਿੰਗ ਅਤੇ ਡੇਟਾ ਵਿਚਕਾਰ ਸਪੱਸ਼ਟ ਵੱਖਰੇਵਾਂ।
- ਵਾਧੂ ਸਲਾਟਸ, ਪ੍ਰੌਪਸ, ਜਾਂ ਮਾਈਕਰੋ-ਇੰਟਰੈਕਸ਼ਨਾਂ ਨਾਲ ਕੰਪੋਨੈਂਟ ਨੂੰ ਵਧਾਉਣ ਲਈ ਇੱਕ ਗਾਈਡ।
ਤੁਸੀਂ ਇਸ ਕੰਪੋਨੈਂਟ ਨੂੰ ਆਪਣੇ HTML ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਵਰਤ ਸਕਦੇ ਹੋ:
<profile-card id="pc" name="Alex" title="Engineer">
<span slot="bio">Custom bio here.</span>
<span slot="social">Twitter: @alex</span>
</profile-card>
ਇਹ ਕੰਪੋਨੈਂਟ ਸਟਾਈਲ ਨੂੰ ਕੈਪਸੂਲੇਟ ਕਰਨ ਅਤੇ ਲੀਕੇਜ ਨੂੰ ਰੋਕਣ ਲਈ Shadow DOM ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਹ ਥੀਮਿੰਗ ਲਈ CSS ਵੇਰੀਏਬਲਜ਼ ਅਤੇ ਐਕਸੈਸਬਿਲਟੀ ਲਈ ARIA ਐਟਰੀਬਿਊਟਸ ਦੀ ਵੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।