Component of Web Frontend
•
0 likes•535 views
2017年2月25日に開催された Inside Frontend の「Web フロントエンドにおけるコンポーネント化のアプローチ」のセッション資料です。
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
More from Shogo Sensui
More from 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. # $ % ✨