nozaki-components

modern vanilla components designed with ES6+ ESM first works in all modern browsers without transpiling.

Usage no npm install needed!

<script type="module">
  import nozakiComponents from 'https://cdn.skypack.dev/nozaki-components';
</script>

README

��#� �N�o�z�a�k�i�-�C�o�m�p�o�n�e�n�t�s� �|� �Α]�0�0�0�0�0�0�0 � � � �M�o�d�e�r�n� �V�a�n�i�l�l�a� �c�o�m�p�o�n�e�n�t� �d�e�s�i�g�n�e�d� �w�i�t�h� �E�S�6�+� �E�S�M� �f�i�r�s�t�.� �T�h�e�s�e� �c�o�m�p�o�n�e�n�t�s� �w�o�r�k� �i�n� �a�l�l� �m�o�d�e�r�n� �b�r�o�w�s�e�r�s� �w�i�t�h�o�u�t� �t�r�a�n�s�p�i�l�i�n�g� �a�n�d� �t�h�o�s�e� �b�r�o�w�s�e�r�s� �h�a�v�e� �9�4�-�9�7�%� �g�l�o�b�a�l� �p�e�n�e�t�r�a�t�i�o�n�.� �Y�o�u� �c�a�n� �o�f� �c�o�u�r�s�e� �t�r�a�n�s�p�i�l�e� �t�h�e�s�e� �c�o�m�p�o�n�e�n�t�s� �i�f� �y�o�u�r� �b�u�s�i�n�e�s�s� �o�r� �p�r�o�j�e�c�t� �h�a�s� �a� �g�o�o�d� �u�s�e�c�a�s�e� �t�h�a�t� �n�e�e�d�s� �t�r�a�n�s�p�i�l�i�n�g�.� � � � � �#� �S�e�t� �U�p� � �O�n�c�e� �y�o�u� �h�a�v�e� �i�n�c�l�u�d�e�d� �nozaki-components� �i�n� �y�o�u�r� �a�p�p�/�s�i�t�e�/�p�r�o�j�e�c�t�,� �a�l�l� �h�y�o�u� �h�a�v�e� �t�o� �d�o� �i�s� �i�m�p�o�r�t� �t�h�e� �c�o�m�p�o�n�e�n�t�s� �y�o�u� �w�o�u�l�d� �l�i�k�e� �t�o� �u�s�e�.� � � � �T�o� �i�n�c�l�u�d�e� �a� �nozaki-header� �o�n� �a� �p�a�g�e�,� �i�t� �w�o�u�l�d� �l�o�o�k� �l�i�k�e� �t�h�i�s� �:� � � � �!�[�n�o�z�a�k�i�-�c�o�p�o�n�e�n�t� �e�x�a�m�p�l�e� �i�m�a�g�e�]�(�/�e�x�a�m�p�l�e�/�i�m�g�s�/�n�o�z�a�k�i�-�c�o�m�p�o�n�e�n�t�s�.�g�i�f�)� � � � �html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Nozaki Components Header Example</title> <script type='module'> //import components used in the page import '/components/NozakiList.js'; </script> </head> <body> <nozaki-list data-class='' data-style='' > <li>�0�0�0</li> <li>�\D�Ė</li> <li>ё0uck*Yΐ</li> <li>��T~</li> <li>�0�0</li> </nozaki-list> </body> </html> � � � � �!�[�n�o�z�a�k�i�-�l�i�s�t� �e�x�a�m�p�l�e� �i�m�a�g�e�]�(�/�e�x�a�m�p�l�e�/�i�m�g�s�/�n�o�z�a�k�i�-�l�i�s�t�.�P�N�G�)� � � � �#� �L�i�v�e� �L�o�c�a�l� �D�e�m�o� � � � �R�u�n� �npm start� �t�o� �s�p�a�w�n� �a� �s�e�r�v�e�r� �a�t� �[�h�t�t�p�:�/�/�l�o�c�a�l�h�o�s�t�:�8�8�8�8�]�(�h�t�t�p�:�/�/�l�o�c�a�l�h�o�s�t�:�8�8�8�8�)� � � � �#� �N�o�z�a�k�i� �P�a�t�t�e�r�n�s� � � � �T�h�e�s�e� �a�r�e� �g�l�o�b�a�l� �p�a�t�t�e�r�n�s� �t�h�a�t� �a�l�l� �nozaki-components� �f�o�l�l�o�w�.� � � � �|�p�r�o�p�e�r�t�y�|�d�e�s�c�r�i�p�t�i�o�n�|� � �|�-�-�-�-�-�-�-�-�|�-�-�-�-�-�-�-�-�-�-�-�|� � �|�data-class� �a�t�t�r�i�b�u�t�e�|�T�h�e� �c�o�n�t�e�n�t�s� �o�f� �t�h�i�s� �a�t�t�r�i�b�u�t�e� �a�r�e� �a�p�p�e�n�d�e�d� �t�o� �t�h�e� �class� �a�t�t�r�i�b�u�t�e� �Shadow Root� �m�a�i�n� �e�l�e�m�e�n�t�.� �T�h�i�s� �i�s� �p�a�r�t�i�c�u�l�a�r�l�y� �u�s�e�f�u�l� �w�h�e�n� �y�o�u� �w�a�n�t� �t�o� �a�d�d� �a�d�d�i�t�i�o�n�a�l� �c�l�a�s�s�e�s� �f�r�o�m� �t�h�e� �[�W�3�.�c�s�s�]�(�h�t�t�p�s�:�/�/�w�w�w�.�w�3�s�c�h�o�o�l�s�.�c�o�m�/�w�3�c�s�s�/�)� �l�i�b�.�|� � �|�data-style� �a�t�t�r�i�b�u�t�e�|�t�h�e� �s�t�y�l�e�s� �p�u�t� �i�n� �t�h�i�s� �a�t�t�r�i�b�u�t�e� �w�i�l�l� �b�e� �u�s�e�d� �a�s� �t�h�e� �l�a�s�t� �s�t�y�l�e�s� �b�e�f�o�r�e� �t�h�e� �m�a�i�n� �c�o�n�t�e�n�t� �o�f� �t�h�e� �Shadow Root�.� �T�h�i�s� �m�e�a�n�s� �t�h�e�y� �w�i�l�l� �b�e� �t�h�e� �m�o�s�t� �i�m�p�o�r�t�a�n�t�.� �|� � � � �#� �n�o�z�a�k�i� �c�l�i� �W�I�P� � � � �W�I�P� � � � �T�o� �u�s�e� �t�h�e� �nozaki cli� �a�n�y�w�h�e�r�e�,� �r�u�n� �npm i -g nozaki-components�.� �I�f� �h�y�o�u� �a�r�e� �j�u�s�t� �c�o�n�t�r�i�b�u�t�i�n�g� �t�o� �nozaki-components� � � � � �T�h�e� �c�o�m�m�a�n�d� �nozaki� �w�i�l�l� �g�i�v�e� �y�o�u� �a�c�c�e�s�s� � � � � � � �#� �E�x�p�l�i�c�i�t� �D�e�p�e�n�d�a�n�c�i�e�s� �(�a�l�r�e�a�d�y� �i�n�c�l�u�d�e�d�)� � � � �1�.� �[�strong-type�]�(�h�t�t�p�s�:�/�/�g�i�t�h�u�b�.�c�o�m�/�R�I�A�E�v�a�n�g�e�l�i�s�t�/�s�t�r�o�n�g�-�t�y�p�e�)� �S�t�r�o�n�g� �t�y�p�i�n�g� �f�o�r� �v�a�n�i�l�l�a� �J�S� � � � �2�.� �[�W�3�.�c�s�s�]�(�h�t�t�p�s�:�/�/�w�w�w�.�w�3�s�c�h�o�o�l�s�.�c�o�m�/�w�3�c�s�s�/�)� �m�i�n�i�m�a�l� �c�s�s� �l�i�b�r�a�r�y� �f�r�o�m� �[�W�3�s�c�h�o�o�l�s�.�c�o�m�]�(�h�t�t�p�s�:�/�/�w�w�w�.�w�3�s�c�h�o�o�l�s�.�c�o�m�/�)�