When creating reusable components, widgets or mini-applications that can be placed on various websites, one of the biggest challenges is to make sure that the host application styles won't affect ours. Shadow DOM was designed to address that problem, but still most of the browsers haven't implemented it. In the presentation I'll show what alternatives do we have today and what solution Site Base will offer. Presentation made by Marcin Mazurek on Lunch & Learn meeting in Grand Parade.

1. CSS encapsulation
strategies
Marcin Mazurek
Front-end developer @ Site Base

3. CSS 101

4. Inheritance

5. Cascading
1.importance
2.specificity
3.order of declaration

6. Specificity Calculator
https://specificity.keegan.st/

7. Proper solution?
Shadow DOM

12. Alternatives?

13. <iframe>

14. #root {
all: initial;
}

16. CSS encapsulation
POC™
A Site Base team proposal:

17. <Modal
<ModalTitle
<ModalContent
<p
</ModalContent>
</Modal>
>
>Hello</ModalTitle>
>
>Hello world!</p>
data-sb
data-sb
data-sb
data-sb
Babel plugin to denote Site
Base DOM nodes

18. PostCSS plugin to
append :not() selector
h1
font-family: 'Comic Sans MS';
color: pink;
}
.modal
border: 1px solid tomato;
}
:not([data-sb])
:not([data-sb])
{
{

19. body:not([data-site-base]) {
font: 16px 'Comic Sans MS';
}
Blocking inheritance with all: initial;
#root-reset {
all: initial;
}
<div id="root-reset">
<!-- SB component -->
</div>

20. Let's not forget about IE11
#root-reset {
background: #fff;
border: none;
color: #000;
display: block;
font: 16px sans-serif;
height: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
visibility: visible;
width: auto;
word-spacing: normal;
z-index: auto;
}

21. https://git.nonprod.williamhill.plc/
site-base-lab/css-encapsulation-poc

22. Performance

24. Bundle sizes, gzipped
Sample generated markup in React with 2000 DOM nodes
- 177kb 178kb (>1%)
Sportsbook CSS - 90kb 94kb (4%)

25. Thank you!