Account

MSI B450A-PRO

Ryzen 2700

Corsair CMR16GX4M2C3000C15

CPU-Z validation: Link

Web Components Custom Elements polyfills for older browsers might cause a Stack overflow error that is very hard to debug. While IE support might not be a top priority, polyfills are also executed by google crawlers.

One thing to check is that constructors of custom elements shouldn't perform rendering or create child elements, but initial rendering should be performed in the connectedCallback method.

When Fetch as Google returns a blank render, there is no console output to debug problems.

But the Mobile-friendly test uses a very similar agent, and it does show console output.

So you can consider using Mobile Friendly Test to debug why Fetch As Google generates a blank page.

Web components have a lot of similarities with Angular Components. They can have input attributes.

If you have a custom element with a custom input attribute bookname In Angular you write

<app-myelement [bookname]="'My Book'"></app-myelement>

To pass in values, and without Angular

<app-myelement bookname="My Book"></app-myelement>

But while vanilla Elements only support string attributes, Angular can pass in any type. If an Angular Component has a field

book = {title: "Adam", year: 1900};

you can pass it as an input

<app-angular-element [bookdata]="book"></app-angular-element>

What is surprising though is that the exact same thing works when you are using Angular with a vanilla Element that accepts a non-string attribute.

<app-vanilla-element [bookdata]="book"></app-vanilla-element>

And you write it in the exact same way.

This is possible because inputs can be passed into Custom Elements in two different ways: via attributes which only accept strings, and via setters which can accept any type.

If you correctly define your Custom Element to support both methods, you'll have great reusability both with and without a framework.

class BookElement extends HTMLElement {

    constructor() {
        super();
        this._bookdata = null;
    }

    static get observedAttributes() {
        return [
            "bookdata"
        ];
    }

    attributeChangedCallback(name, old, newValue) {
        if (name == "bookdata") {
            this.bookdata = newValue;
        }
    }

    set bookdata(value) {
        this._bookdata = value;
    }

}

In this element, the bookdata input can be set via attribute, meaning that this._bookdata will be a string, and via setter, making this._bookdata any type.

Using HTML attributes relies on observedAttributes and attributeChangedCallback, while using Angular bypasses those two methods and uses the setter.

Specs:

  • MSI B450-A PRO
  • AMD Ryzen 7 2700
  • Corsair Vengeance RGB 16GB 3000hz
  • Powercolor Red Dragon Radeon Vega 56
  • Be Quiet Pure Power 10 600W
  • Phanteks Enthoo Pro M Tempered Glass
  • Noctua C14S
More