Component of Web Frontend
•
0 gostou•535 visualizações
2017年2月25日に開催された Inside Frontend の「Web フロントエンドにおけるコンポーネント化のアプローチ」のセッション資料です。
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Mais de Shogo Sensui
Mais de Shogo Sensui (15)
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. # $ % ✨