Thanks Anna Chebotar

React Champion @ CBA Digital

Angular 6+

Can I integrate with React?

Use Cases

• CMS (WordPress, SharePoint)
• Dashboard (Widgets)
• Micro Frontends
• Other Consumers (ReactJS, VueJS, ...)
• Share components between teams
• Reuse old Components (tested ready)

Web Components

https://www.webcomponents.org/specs

Libraries

• Polymer
• Stencil (Ionic)
• SkateJS
• X-Tag

https://www.webcomponents.org/libraries

please up vote considering Edge

Polyfills

npm install @webcomponents/custom-elements

https://www.webcomponents.org/polyfills

Custom Elements API

class MyElement extends HTMLElement {}

customElements.define("my-element", MyElement);

<my-element></my-element>

Similar: Angular Component or React.createElement()

Customize Existing HTML Element

class DangerButton extends HTMLButtonElement {}

customElements.define(
    "danger-button",
    DangerButton,
    { extends: "button" }
);

<danger-button></danger-button>

Similar: Angular Directive or React.createElement()

Reactions

class MyElement extends HTMLElement {
    // ngOnInit()
    connectedCallback() {}

    // ngOnDestroy()
    disconnectedCallback() {}
}

Attributes and Properties

class HelloWorld extends HTMLElement {
    name: string;

    static get() observedAttributes = ["name"];

    attributeChangedCallback(key, oldValue, newValue) {
        if (oldValue !== newValue) {
            this.name = newValue;
        }
    }

    set name(value) {}
    get name() {}
}

<hello-world name="Leo Caseiro"></hello-world>

Similar: Angular @Input() and @HostBinding()

Similar: React props

CustomEvent()

class DangerButton extends HTMLButtonElement {
    onClick() {
        this.dispatchEvent(
            new CustomEvent("show-validation",
                { form: isValid }
            )
        );
    }
}

const dangerBtn = document.querySelector('danger-button');

dangerBtn.addEventListener("show-validation", event => { ... });

Similar: @Output()

ng add @angular/elements

Setup tsconfig.json

{
    "target": "es2015"
}

In browsers that support Custom Elements natively, the specification requires developers to use ES2015 classes to define Custom Elements.

Bootstrap

import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';

@NgModule({
    imports: [BrowserModule],
    declarations: [MyAngularElementComponent],
    entryComponents: [MyAngularElementComponent]
})
export class AppModule {
    constructor(private injector: Injector) {}

    ngDoBootstrap() {
        customElements.define("my-angular-element",
            createCustomElement(MyAngularElementComponent,
                { injector: this.injector }
            )
        );
    }
}

Setup Native Encapsulation

@Component({
    selector: 'danger-button',
    template: `<slot></slot>`, // similar ng-content
    encapsulation: ViewEncapsulation.Native // wait ng7 and Ivy
})
export class DangerButtonComponent {}

Slots + Shadom DOM - Experimental

Integrating with React

https://reactjs.org/docs/web-components.html

Refs and the DOM

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <my-web-component ref={this.myRef}></my-web-component>;
  }
}

const node = this.myRef.current;
node.messages = [];

https://reactjs.org/docs/refs-and-the-dom.html

Key for Loops

Uncaught Error: Error trying to diff '[object Object],[object Object]'. Only arrays and iterables are allowed

const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );

https://reactjs.org/docs/lists-and-keys.html

Wrapping React Components into a Web Component.

npm install web-react-components

https://github.com/ChristophP/web-react-components