The document discusses a presentation by Knut Herrmann on building custom HTML tags (web components) using vanilla JavaScript. It provides examples of creating a <domino-view> web component that can render Notes/Domino views by defining custom element classes, handling attributes and properties, adding events, using shadow DOM, templates, and deployment strategies. The presentation suggests the HCL or Domino community could create a set of reusable Domino-based web components like <domino-view>, <domino-form>, <domino-datetime-field>, etc. to improve frontend development.

1. CollabSphere 2019
Woburn, MA | October 28-30
Web Components:
build your own HTML tags
like <domino-view>
Knut Herrmann
1

2. CollabSphere 2019
Woburn, MA | October 28-30
2
Sponsors

3. CollabSphere 2019
Woburn, MA | October 28-30
3
Knut Herrmann
 Senior Software Architect
Leonso GmbH
 Notes Domino developer since version 2
 Web application developer
 StackOverflow contributor
E-Mail: knut.herrmann@leonso.de
Twitter: @KnutHerrmann
Skype: knut.herrmann2018 and 2019

4. CollabSphere 2019
Woburn, MA | October 28-30
4
Why
Web Components
?

5. CollabSphere 2019
Woburn, MA | October 28-30
5
Server-side
rendering
Client-side
rendering
XPages
Frameworks for
Web Application Development

6. CollabSphere 2019
Woburn, MA | October 28-30
6
React Frontend Domino Backend

7. CollabSphere 2019
Woburn, MA | October 28-30
7
Reusable
Components
consistency
less code
faster development
easier testing
fever bugs

8. CollabSphere 2019
Woburn, MA | October 28-30
8

9. CollabSphere 2019
Woburn, MA | October 28-30
9

10. CollabSphere 2019
Woburn, MA | October 28-30
10

11. CollabSphere 2019
Woburn, MA | October 28-30
11
Web Component

12. CollabSphere 2019
Woburn, MA | October 28-30
12
Web Components
based on web standards
framework agnostic

13. CollabSphere 2019
Woburn, MA | October 28-30
13
Let’s create a Web Component
<domino-view
db="myDb"
view="myView">
</domino-view>

14. CollabSphere 2019
Woburn, MA | October 28-30
14
Custom Elements
create new HTML tags or extend existing
with vanilla JS/HTML/CSS

15. CollabSphere 2019
Woburn, MA | October 28-30
15
class DominoElement extends HTMLElement {…code…}
customElements.define('domino-view', DominoElement);
<domino-view></domino-view>
<script type="module" src="domino-view.js"></script>
domino-view.js
index.html
dash!
Custom Elements

16. CollabSphere 2019
Woburn, MA | October 28-30
16
class DominoElement extends HTMLElement {
constructor() {
super();
...
}
connectedCallback() {
...
}
disconnectedCallback() {
...
}
}
live cycle
demo 1
Custom Elements

17. CollabSphere 2019
Woburn, MA | October 28-30
17
<domino-view>
attributes
<domino-view
db="myDb"
view="myView">
</domino-view>
<script>
document.querySelector('domino-view')
.setAttribute('view', 'myOtherView')
</script>
Custom Elements
attributes

18. CollabSphere 2019
Woburn, MA | October 28-30
18
<domino-view>
attributes
attributes
class DominoElement extends HTMLElement {
static get observedAttributes() {
return ["db", "view"];
}
attributeChangedCallback(attrName,
oldValue, newValue) {
if (attrName === "db") {
this._db = newValue;
} else if (attrName === "view") {
this._view = newValue;
}
this.render();
}
demo 2
Custom Elements

19. CollabSphere 2019
Woburn, MA | October 28-30
19
<domino-view>
<domino-view></domino-view>
properties
<script>
const dominoView =
document.querySelector('domino-view');
dominoView.db = 'myDb';
dominoView.view = 'myView';
</script>
Custom Elements
properties

20. CollabSphere 2019
Woburn, MA | October 28-30
20
<domino-view>
properties
properties
class DominoElement extends HTMLElement {
set view(view) {
this._view = view;
this.render();
}
get view() {
return this._view;
}
Custom Elements

21. CollabSphere 2019
Woburn, MA | October 28-30
21
<domino-view>
attributes
attributes & properties
properties
class DominoElement extends HTMLElement {
set view(view) {
this.setAttribute("view", view);
}
get view() {
return this.getAttribute("view");
}
demo 3
Custom Elements

22. CollabSphere 2019
Woburn, MA | October 28-30
class DominoElement extends HTMLElement {
attributeChangedCallback(attrName,
oldValue, newValue) {
...
this.render();
}
connectedCallback() {
this._isConnected = true;
this.render();
}
render = () =>
this._isConnected &&
/* render Domino view here */
this.innerHtml = ...
<domino-view>
22
attributes
properties
demo 4
Custom Elements
rendering

23. CollabSphere 2019
Woburn, MA | October 28-30
23
<domino-view>
attributes
events
properties
events
<domino-view
db="myDb"
view="myView">
</domino-view>
<script>
document
.querySelector("domino-view")
.addEventListener(
"handleRowClick",
event => doSomethingWith(event.detail)
);
</script>
Custom Elements

24. CollabSphere 2019
Woburn, MA | October 28-30
24
<domino-view>
attributes
properties
events
class DominoElement extends HTMLElement {
handleRowClick = (rowData) =>
this.dispatchEvent(
new CustomEvent("handleRowClick",
{detail: rowData}));
render = () =>
this._isConnected &&
/* render Domino view here */
...
handleRowClick={this.handleRowClick}
...
Custom Elements
events

25. CollabSphere 2019
Woburn, MA | October 28-30
25
<domino-view>
attributes
properties
events
<domino-form>
attributes
properties
events
application
demo 5
Custom Elements
events

26. CollabSphere 2019
Woburn, MA | October 28-30
26
Shadow DOM
encapsulates custom components
by hidden separated DOM

27. CollabSphere 2019
Woburn, MA | October 28-30
27
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Shadow DOM

28. CollabSphere 2019
Woburn, MA | October 28-30
28
isolated DOM
simple CSS selectors
cheap style checks
fast
Shadow DOM

29. CollabSphere 2019
Woburn, MA | October 28-30
29
class DominoElement extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
}
Shadow DOM

30. CollabSphere 2019
Woburn, MA | October 28-30
30
.domino-view__header-row {
color: var(--header-color);
}
<style>
domino-view {
height: 300px;
color: blue;
--header-color: green;
}
</style>
<domino-view … ></domino-view>
shadow host
shadow DOM
CSS custom properties
User defined styles overwrite
custom element’s styles
Shadow DOM

31. CollabSphere 2019
Woburn, MA | October 28-30
31
:host {
all: initial;
display: block;
height: 100%;
}
:host([hidden]) {
display: none;
}
Inheritable styles
(background, color, font, line-height, etc.)
continue to inherit in shadow DOM
unlessshadow DOM
demo 6
Shadow DOM

32. CollabSphere 2019
Woburn, MA | October 28-30
32
Templates
placeholder for declaring the structure
of a custom element

33. CollabSphere 2019
Woburn, MA | October 28-30
33
parsed once
instantiated during
runtime any number of
times
Templates

34. CollabSphere 2019
Woburn, MA | October 28-30
34
const template = document.createElement('template');
template.innerHTML = `
<style>:host { ... }</style>
<h2>This is an example for Templates.</h2>
<slot></slot>
<p>Content...</p>
`;
class DominoElement extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(
template.content.cloneNode(true));
}
Templates

35. CollabSphere 2019
Woburn, MA | October 28-30
35
const template = document.createElement('template');
template.innerHTML = `
<style>:host { ... }</style>
<h2>This is an example for Templates.</h2>
<slot></slot>
<p>Content...</p>
`;
<domino-view ...>
<b>This will be placed into slot.</b>
</domino-view>
demo 7
Templates

36. CollabSphere 2019
Woburn, MA | October 28-30
36
Deployment
…
<script type="module"
src="https://server/WebComponents.nsf/domino-view.js">
</script>
demo XPages
… or publishing on NPM

37. CollabSphere 2019
Woburn, MA | October 28-30
37
https://www.webcomponents.org/

38. CollabSphere 2019
Woburn, MA | October 28-30
38
Compatibility
Use Web Components
Build Web Components
*
*
*with workarounds/limitations now – better in future releases https://custom-elements-everywhere.com/

39. CollabSphere 2019
Woburn, MA | October 28-30
39
https://www.polymer-project.org/
Tools for Web Component development
https://stenciljs.com/

40. CollabSphere 2019
Woburn, MA | October 28-30
Production ready free Web components
40
…
https://vaadin.com/components

41. CollabSphere 2019
Woburn, MA | October 28-30
41
Web Components
run on any platform or device
reusable, really

42. CollabSphere 2019
Woburn, MA | October 28-30
42

43. CollabSphere 2019
Woburn, MA | October 28-30
43
Suggestion: HCL or community
creates a cool set of Web Components
<domino-view>
<domino-datetime-field>
<domino-form>
<domino-folder>
<domino-agent>
<domino-what-ever>
<domino-login>
<domino-for-ever>
<domino-richtext-field>

44. CollabSphere 2019
Woburn, MA | October 28-30
44
Questions?

45. CollabSphere 2019
Woburn, MA | October 28-30
45
Thank you!