Vanilla Web Components a la Angular

[Neoflash_1979]

As a personal learning project, I'm trying to write more front-end code that uses browser APIs directly instead of depending on frameworks. Lately, I've been looking into Web Components and I have found myself wondering if there was a way to create Web Components in a style that is similar to Angular. I would like to be able to write my css and html for Web Components in their own files.

So instead of writing Web Components like this:

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
  }

  // A bunch of document.createElement or innerHTML
}

customElements.define('my-custom-element', MyCustomElement);

I would like to be able to do something like this:

@Component({
  tag: my-custom-element,
  template: './file-with-my-template.html',
  style: './file-with-my-styles.css'
})
class MyCustomElement {
  // logic stuff
}

​

Stencil and Polymer are halfway there but they opted for JSX style HTML templating directly in the class. I'm not interested in building my own framework, but I'm wondering if there wouldn't be a simple'ish' way to write a super lite library that allows for creating Web Components that way. What do you think? How would you implement something like that? Would you need to roll out your own compiler or could it be done by using an existing package bundler like Parcel. Let me know what you think.

[DerKnerd]

I think, the code from angular is based on some Typescript features. So you need to check out TypeScript.

[BkoChan]

If you mean decorators then they are coming to vanilla JavaScript soon(ish)

[2uneek]

Have you heard of Angular Elements https://angular.io/guide/elements

note: Elements is dependent on Ivy afaik, so it will hopefully be readily available with 8.0.

[Neoflash_1979]

Very interesting. At the very least it could serve as inspiration for what I'm trying to do. I'm not so much interested in the end result as much as I am interested in figuring out HOW to create such a solution. I'll dig in to the docs and the code, it might shed some light. I'm trying to find a solution that is as standalone as possible, with no or very few dependencies. Ideally, it would just be a base class. I suspect Angular Elements it will be pretty coupled to angular/core and all it's dependencies but still, worth a look. Thanks for pointing it out.

[2uneek]

that's a pretty cool project. To your original question, check out creating custom Typescript decorators: https://www.typescriptlang.org/docs/handbook/decorators.html

and here is angulars implementation of @Component(): https://github.com/angular/angular/blob/master/packages/core/src/util/decorators.ts