Solving Common Web Component Problems - Simon MacDonald
•
0 likes•6 views
This document discusses solving common problems with web components using server side rendering. It begins by explaining what web components are - custom elements, shadow DOM, and HTML templates. It then discusses why web components are useful, such as component reuse and interoperability. Common problems with web components are described like flash of undefined custom elements (FOUCE) and shadow DOM not playing well with native forms. Solutions to these problems include declarative shadow DOM and the Enhance framework, which allows server side rendering of components to avoid FOUCE and uses the light DOM for styling instead of shadow DOM. Overall, the document presents server side rendering as an effective way to solve problems with web components.
Report
Share
Related slideshows
Solving Common Web Component Problems - Simon MacDonald
- 1. SOLVING COMMON WEB COMPONENT PROBLEMS with Server Side Rendering
- 2. SOLVING COMMON WEB COMPONENT PROBLEMS with Server Side Rendering using Enhance!
- 4. INDEX What are Web Components? Why are they useful? What are their problems? How do we solve them?
- 5. WHAT ARE WEB COMPONENTS?
- 6. WHAT ARE WEB COMPONENTS? Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. – MDN 〞
- 7. “ OH, YOU MEAN REACT
- 9. Let's address the elephant in the room right away
- 10. REACT WC'S
- 14. Reusable Components DOM Syncing Stateful Not the platform REACT WC'S
- 15. Reusable Components DOM Syncing Stateful Not the platform REACT Reusable Components WC'S
- 16. Reusable Components DOM Syncing Stateful Not the platform REACT Reusable Components Interoperable WC'S
- 17. Reusable Components DOM Syncing Stateful Not the platform REACT Reusable Components Interoperable Accessible WC'S
- 18. Reusable Components DOM Syncing Stateful Not the platform REACT Reusable Components Interoperable Accessible Part of the platform WC'S
- 19. WHAT ARE WEB COMPONENTS (PART DEUX)?
- 20. WHAT ARE WEB COMPONENTS (PART DEUX)? Custom Elements
- 21. WHAT ARE WEB COMPONENTS (PART DEUX)? Custom Elements Shadow DOM
- 22. WHAT ARE WEB COMPONENTS (PART DEUX)? Custom Elements Shadow DOM HTML Templates
- 23. CUSTOM ELEMENTS https://codepen.io/macdonst/embed/ZErMzrr?default- tab=html%2Cresult&editable=true
- 24. CUSTOM ELEMENTS <hello-world name="Simon"> <h1>Hello Simon</h1> </hello-world> 1 2 3
- 26. SHADOW DOM <hello-world name="Simon"> #shadow-root <h1>Hello <span>Simon</span></h1> </hello-world> 1 2 3 4
- 27. HTML TEMPLATES https://codepen.io/macdonst/embed/vYjpYpV?default- tab=html%2Cresult&editable=true
- 28. HTML TEMPLATES <hello-world> #shadow-root <h1> Hello <slot name="name"></slot> </h1> <span slot="name">Simon</span> </hello-world> 1 2 3 4 5 6 7
- 29. INDEX What are Web Components? Why are they useful? What are their problems? How do we solve them?
- 30. WHY ARE WEB COMPONENTS USEFUL?
- 31. WHY ARE WEB COMPONENTS USEFUL? Component reuse and interoperability
- 32. WHY ARE WEB COMPONENTS USEFUL? Uses less JavaScript Component reuse and interoperability
- 33. WHY ARE WEB COMPONENTS USEFUL? Uses less JavaScript Accessible Component reuse and interoperability
- 34. WHY ARE WEB COMPONENTS USEFUL? Uses less JavaScript Accessible Shorter learning path Component reuse and interoperability
- 35. WHY ARE WEB COMPONENTS USEFUL? Uses less JavaScript Accessible Shorter learning path Encapsulation Component reuse and interoperability
- 36. ASIDE IS ANYONE ACTUALLY USING WEB COMPONENTS?
- 37. SURE SEEMS LIKE IT https://chromestatus.com/metrics/feature/timeline/popularity/1689
- 38. APPS MADE WITH WEB COMPONENTS
- 39. INDEX What are Web Components? Why are they useful? What are their problems? How do we solve them?
- 40. PROBLEM: FLASH OF UNSTYLED CONTENT (FOUC)
- 41. PROBLEM: FLASH OF UNSTYLED CONTENT (FOUC) A flash of unstyled content is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved – Wikipedia 〞
- 42. PROBLEM: FLASH OF UNDEFINED CUSTOM ELEMENTS (FOUCE)
- 43. PROBLEM: FLASH OF UNDEFINED CUSTOM ELEMENTS (FOUCE) You may see a brief flash of unstyled HTML where your custom elements should be when the page loads. This is not dissimilar to FOUC, which occurs when HTML is displayed before the stylesheet has loaded. – Cory LaViska 〞
- 44. FOUCE EXAMPLE https://codepen.io/macdonst/embed/poVaVeN?default- tab=html%2Cresult&editable=true
- 45. WHY DOES FOUCE HAPPEN?
- 46. WHY DOES FOUCE HAPPEN? Browser requests HTML
- 47. WHY DOES FOUCE HAPPEN? Browser requests HTML It encounters an unknown element, "hello-world"
- 48. WHY DOES FOUCE HAPPEN? Browser requests HTML It encounters an unknown element, "hello-world" The browser treats the unknown element as an inline element No styles are applied due to the Shadow DOM boundary
- 49. WHY DOES FOUCE HAPPEN? Browser requests HTML It encounters an unknown element, "hello-world" The browser treats the unknown element as an inline element No styles are applied due to the Shadow DOM boundary Browser loads the web components JavaScript
- 50. WHY DOES FOUCE HAPPEN? Browser requests HTML It encounters an unknown element, "hello-world" The browser treats the unknown element as an inline element No styles are applied due to the Shadow DOM boundary Browser loads the web components JavaScript The web component is instantiated, and the encapsulated CSS & JavaScript is applied FOUCE HAPPENS!!!
- 51. PROBLEM: SHADOW DOM DOESN'T PLAY WELL WITH NATIVE FORMS
- 52. PROBLEM: SHADOW DOM DOESN'T PLAY WELL WITH NATIVE FORMS Custom elements cannot extend elements other than HTMLElement*
- 53. PROBLEM: SHADOW DOM DOESN'T PLAY WELL WITH NATIVE FORMS Custom elements cannot extend elements other than HTMLElement* Form elements inside the Shadow DOM are not considered as such by the component's parent form.
- 54. SHADOW DOM VS FORMS EXAMPLE https://codepen.io/macdonst/embed/bGMLKBR?default- tab=html%2Cresult&editable=true
- 55. INDEX What are Web Components? Why are they useful? What are their problems? How do we solve them?
- 56. SOLUTIONS
- 57. FOUCE SOLUTION https://codepen.io/macdonst/embed/bGMLKmL?default- tab=html%2Cresult&editable=true
- 59. DECLARATIVE SHADOW DOM Proposal to allow rendering elements with shadow DOM (aka web components) using server-side rendering. 〞
- 61. DECLARATIVE SHADOW DOM <hello-world> #shadow-root <style> h1 { color: red } </style> <h1> Hello <slot name="name"></slot> </h1> <span slot="name">Simon </span></hello-world> 1 2 3 4 5 6 7 8 9 10
- 64. SHADOW DOM DOESN'T PLAY WELL WITH NATIVE FORMS SOLUTION
- 65. SHADOW DOM DOESN'T PLAY WELL WITH NATIVE FORMS SOLUTION
- 66. SHADOW DOM DOESN'T PLAY WELL WITH NATIVE FORMS SOLUTION
- 67. SHADOW DOM DOESN'T PLAY WELL WITH NATIVE FORMS SOLUTION
- 68. SHADOW DOM DOESN'T PLAY WELL WITH NATIVE FORMS SOLUTION
- 69. FACE* AND ELEMENT INTERNALS https://codepen.io/rbethel/embed/zYMeZEd *Form Associated Custom Elements
- 70. IS THERE A SOLUTION WE CAN USE TODAY?
- 71. 〞 We can't solve problems by using the same kind of thinking we used when we created them. – Albert Einstein
- 73. WHAT IS ENHANCE? AUTHOR Enhance allows developers to write components as pure functions that return HTML. Then render them on the server to deliver complete HTML immediately available to the end user. Enhance takes care of the tedious parts, allowing you to use today’s Web Platform standards more efficiently. As new standards and platform features become generally available, Enhance will make way for them. STANDARDS Enhance allows for easy progressive enhancement so that working HTML can be further developed to add additional functionality with JavaScript. PROGRESSIVE Enhance is a web standards-based HTML framework. It’s designed to provide a dependable foundation for building lightweight, flexible, and future-proof web applications.
- 74. ENHANCE FOUCE SOLUTION export default function HelloWorld({ html }) { return html` <style> h1 { color: red } </style> <h1> Hello <slot name="name"></slot> </h1>` } 1 2 3 4 5 6 7 8 9 <hello-world> <span slot="name">Simon</slot> </hello-world> 1 2 3 HTML Javascript https://bird-3st.begin.app/fouce https://bird-3st.begin.app/fouce
- 76. STOPPING FOUCE
- 77. STOPPING FOUCE Browser requests HTML
- 78. STOPPING FOUCE Browser requests HTML Enhance expands your custom elements on the server as well as hoisting your encapsulated styles to the page's head tag
- 79. STOPPING FOUCE Browser requests HTML Enhance expands your custom elements on the server as well as hoisting your encapsulated styles to the page's head tag It encounters an unknown element, "hello-world"
- 80. STOPPING FOUCE Browser requests HTML Enhance expands your custom elements on the server as well as hoisting your encapsulated styles to the page's head tag It encounters an unknown element, "hello-world" The browser treats the unknown element as an inline element, but your CSS is already loaded, so it is styled properly
- 81. STOPPING FOUCE Browser requests HTML Enhance expands your custom elements on the server as well as hoisting your encapsulated styles to the page's head tag It encounters an unknown element, "hello-world" The browser treats the unknown element as an inline element, but your CSS is already loaded, so it is styled properly Browser loads the web components JavaScript
- 82. STOPPING FOUCE Browser requests HTML Enhance expands your custom elements on the server as well as hoisting your encapsulated styles to the page's head tag It encounters an unknown element, "hello-world" The browser treats the unknown element as an inline element, but your CSS is already loaded, so it is styled properly Browser loads the web components JavaScript The web component is instantiated, and your custom element is "enhanced"
- 83. ENHANCE SHADOW DOM VS FORMS SOLUTION export default function MyButton({ html }) { return html` <style> button { color: white; background-color: black; border-radius: 3px; } </style> <button> <slot></slot> </button>` } 1 2 3 4 5 6 7 8 9 10 11 12 13 <form action="javascript:alert('hello')"> <input type="text" name="name"> <input type="password" name="password"> <my-button> Login </my-button> </form> 1 2 3 4 5 6 7 HTML Javascript https://bird-3st.begin.app/forms https://bird- 3st.begin.app/forms
- 84. ENHANCE SHADOW DOM VS FORMS SOLUTION https://codepen.io/macdonst/embed/RwvjzQV?default- tab=html%2Cresult&editable=true
- 86. BENEFITS OF ENHANCE All components are server side renderable with no changes.
- 87. BENEFITS OF ENHANCE All components are server side renderable with no changes. Leverage your CSS skills and style encapsulation in the light DOM.
- 88. BENEFITS OF ENHANCE All components are server side renderable with no changes. Leverage your CSS skills and style encapsulation in the light DOM. Use slots without the shadow DOM
- 89. BENEFITS OF ENHANCE All components are server side renderable with no changes. Leverage your CSS skills and style encapsulation in the light DOM. Use slots without the shadow DOM Avoid excessive JavaScript code by leveraging the platform and web standards
- 91. THANKS!