sebastienlevert

{
  //...
  "dependencies": {
    //...
    "zone.js": "0.8.18"
  },
  //...
}

sebastienlevert

//...

export default class ListRestWebPart extends BaseClientSideWebPart<ListRest> {

  public render(): void {
    let ngElement = this.domElement.getElementsByTagName('list-rest')[0]

    if(ngElement) {
      this.domElement.removeChild(ngElement);
    }

sebastienlevert

//...
import { WebPartContext } from '@microsoft/sp-webpart-base';

@Component({
  //...
})
export class ListRest {
  //...
  @Input() context: WebPartContext;
  //...

sebastienlevert

{
  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "hello-world-web-part": {
      "components": [
        {
          "entrypoint": "./src/webparts/helloWorld/HelloWorldWebPart.ts",
          "manifest": "./src/webparts/helloWorld/HelloWorldWebPart.manifest.json",
          "entryModule": "./src/webparts/helloWorld/elements/hello-world",

sebastienlevert

import './elements';
import { HelloWorld } from './elements/hello-world';
import { NgElement } from '@angular/elements';


import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField

sebastienlevert

//web components ES5 shim
import '../../../elements/wc-shim'
import { registerAsCustomElements } from '@angular/elements';
import { platformBrowser } from '@angular/platform-browser'

import { HelloWorld, HelloWorldModule } from './hello-world'
import { HelloWorldModuleNgFactory } from './hello-world.ngfactory'

registerAsCustomElements(
  [HelloWorld],

sebastienlevert

@import 'node_modules/@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

.helloWorld {
  .container {
    max-width: 700px;
    margin: 0px auto;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  }

  .row {

sebastienlevert

<div class="helloWorld">
  <div class="container">
    <div class="row">
      <div class="column">
        <span class="title">Welcome to SharePoint!</span>
        <p class="subTitle">Customize SharePoint experiences using Web Parts.</p>
        <p class="description">{{ description }}</p>
        <a href="https://aka.ms/spfx" class="button">
          <span class="label">Learn more</span>
        </a>

sebastienlevert

import { Component, NgModule, Input, ViewEncapsulation } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from '@angular/common';

@Component({
  selector: 'hello-world',
  templateUrl: `./hello-world.html`,
  styleUrls: [ 'hello-world.scss' ],
  encapsulation: ViewEncapsulation.None
})

sebastienlevert

import 'zone.js'

(function () {
  'use strict';

  if(window['WC_SHIMMED']) return;

  (()=>{'use strict';if(!window.customElements)return;const a=window.HTMLElement,b=window.customElements.define,c=window.customElements.get,d=new Map,e=new Map;let f=!1,g=!1;window.HTMLElement=function(){if(!f){const a=d.get(this.constructor),b=c.call(window.customElements,a);g=!0;const e=new b;return e}f=!1;},window.HTMLElement.prototype=a.prototype;Object.defineProperty(window,'customElements',{value:window.customElements,configurable:!0,writable:!0}),Object.defineProperty(window.customElements,'define',{value:(c,h)=>{const i=h.prototype,j=class extends a{constructor(){super(),Object.setPrototypeOf(this,i),g||(f=!0,h.call(this)),g=!1;}},k=j.prototype;j.observedAttributes=h.observedAttributes,k.connectedCallback=i.connectedCallback,k.disconnectedCallback=i.disconnectedCallback,k.attributeChangedCallback=i.attributeChangedCallback,k.adoptedCallback=i.adoptedCallback,d.set(h,c),e.set(c,h),b.call(window.customElements,c,j);},c