Component of Web Frontend
0 likes542 views
Documentul descreie o abordare pentru implementarea stilizării în aplicațiile web utilizând teme și stiluri CSS. De asemenea, se discută despre crearea și utilizarea elementelor personalizate în HTML, inclusiv gestionarea conținutului prin shadow DOM. Exemplele oferite ilustrează cum să aplicați aceste concepte în codul JavaScript.
Component of Web Frontend
- 4. ?
- 6. ‣ ‣ ‣ ‣ ‣ ‣
- 7. !
- 8. ?
- 10. 📱 ☁
- 12. ‣ ‣ ‣ ‣ ‣ ‣
- 13. ?
- 14. "
- 15. ‣ ‣ ‣
- 16. ?
- 19. ‣ ‣ ‣ ‣ ‣ ‣ ‣
- 20. "
- 21. ‣ ‣ ‣ ‣ ‣ ‣
- 25. ?
- 28. ‣ ‣ ‣ ‣ ‣ ‣
- 30. ?
- 34. ‣ ‣ ‣ ‣ ‣ ‣
- 36. 😅
- 37. ‣ ‣ ‣ ‣ ‣
- 38. /* style.css */ .className { color: green; } import styles from "./style.css"; element.innerHTML = `<input class="${styles.className}">`;
- 39. import jss from 'jss'; const styles = jss.createStyleSheet({ className: { color: green } }).attach(); element.innerHTML = `<input class="${styles.className}">`;
- 40. ‣ ‣ ‣ ‣ ‣ ‣
- 41. <template> <style> :host { display: inline-block; } </style> <input type="checkbox"> </template> <script> class SwitchElement extends HTMLElement { constructor() { super(); const o = document.currentScript.ownerDocument; const t = o.querySelector('template'); this.attachShadow({ mode: 'open' }); this.shadowRoot.appendChild(t.content.cloneNode(true)); } } customElements.define('switch-element', SwitchElement); </script>
- 43. ‣ ‣ ‣ ‣ ‣ ‣ ‣
- 44. ‣ ‣ ‣ ‣ ‣ ‣ ‣
- 45. ‣ ‣ ‣ ‣ ‣
- 46. ‣ ‣ ‣ ‣ ‣ ‣
- 49. ‣ ‣ ‣ ‣
- 50. # $ % ✨