Changes:

• instanceof usage replaced with duck-typing
• unsafe query selector fixed

Scoping rules:

1. CSS

[ui5-button] { color: red; }

instead of

ui5-button { color: red; }

2. DOM access

this.shadowRoot.querySelector("[ui5-input]")

instead of

this.shadowRoot.querySelector("ui5-input")

3. Components used in .hbs must be declared in dependencies

Template:

<div class="ui5-comp-root">
  <ui5-input></ui5-input>
  <ui5-button></ui5-button>
</div>

Component class:

dependencies: [ Button, Input ]

4. instanceof cannot be used for components and their base classes

If there are 2 or more instances of the framework on the same HTML page that do not use scoping, some other instance might have declared the class and instanceof checks will fail

Instance A)

window.customElements.define("ui5-tree", TreeClassA); // registers
window.customElements.define("ui5-tree-item", TreeItemClassA); // registers

Instance B)

window.customElements.define("ui5-tree", TreeClassB); // FAILS to register
window.customElements.define("ui5-tree-item", TreeItemClassB); // FAILS to register
window.customElements.define("ui5-tree-item-custom", TreeItemCustomClassB); // registers

In this example the code of "Instance B" will use Tree and Tree item from the runtime A) which means that "ui5-tree-item-custom" will fail all instanceof checks.

4.1 Solution A - use getAttribute

Instead of:

if (item instanceof Option) {}

use:

if (item.hasAttribute("ui5-option") {}

4.2 Solution B - use duck-typing

This is the only possible solution if you access the children, and TS must know the class of the duck-typed child.

For examples how to implement duck-typing in TS, see the changes in this PR.