Solving Components errors with Server Side Rendering - Simon MacDonald

1. SOLVING COMMON
WEB COMPONENT
PROBLEMS
with Server Side Rendering

2. SOLVING COMMON
WEB COMPONENT
PROBLEMS
with Server Side Rendering
using Enhance!

3. SIMON MACDONALD
@MACDONST@MASTODON.ONLINE

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

11. Reusable Components
REACT WC'S

12. Reusable Components
DOM Syncing
REACT WC'S

13. Reusable Components
DOM Syncing
Stateful
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

25. SHADOW DOM
https://codepen.io/macdonst/embed/oNdpNKQ?default-
tab=html%2Cresult&editable=true

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

58. DECLARATIVE SHADOW DOM

59. DECLARATIVE SHADOW DOM
Proposal to allow rendering elements
with shadow DOM (aka web
components) using server-side
rendering.
〞

60. DECLARATIVE SHADOW DOM
https://codepen.io/macdonst/embed/gOQwyJO?default-
tab=html%2Cresult&editable=true

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

75. ENHANCE FOUCE SOLUTION
https://codepen.io/macdonst/embed/wvNPLep?default-
tab=html%2Cresult&editable=true

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

85. BENEFITS OF ENHANCE

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!