Custom elements are a JavaScript trick to allow you to make up your own HTML tags which are able to work and do stuff by way of supporting JavaScript. Think of how the selector tag for a component loops in a component at the DOM in an Angular application, only imagine doing that outside of Angular or React or Vue in an environment where there is no guarantee of support for anything beyond vanilla JavaScript. These creatures can survive in most any environment. Web components in contrast to custom elements loop in the Shadow DOM and HTML templates as well. Angular Elements is the Angular way to make web components. You author in Angular and then push out some code that can run outside of Angular independent of Angular albeit perhaps with the trick of including a slimmed-down version of Angular in the source code.
customElements.define('my-element',
MyElement);
...is an example of creating a definition for a custom element in JavaScript and that in turn should allow you to have an HTML tag like so:
<my-element some-attribute="a value">
</my-element>
You have to have a tag with at least one hyphen in it to guarantee that the tag you dreamt up will not collide with a new HTML tag that could exist one day. I believe the attributes have to have hyphenated names too and what is more you cannot pass JSON objects in these inputs. You have to pass strings. You can always stringify JSON and then parse it to get it across this hurdle. This stuff does not work in Microsoft's browsers, just Google Chrome. There are polyfills to address as much, but by now custom elements probably sound kinda ghetto, huh? They are in their infancy as an emerging technology and not yet something you should bet the farm on so to speak, or as David put it: "Don't put them in your money-making code." Maybe they could be fun to just goof off with in the name of getting your head around something you likely will eventually have to care about. connectedCallback() is a callback event for custom elements kind of like ngOnInit in the Angular space and disconnectedCallback() is the event for when the custom element is destroyed. attributeChangeCallback() is an event for reacting to a change at one of the attributes. Coming with the Ivy renderer which will be optional in Angular 8 and forced upon you in Angular 9, you will have Angular Materials. David authored what he showed off to the crowd in the alpha of Angular 8. One of the weaknesses of modern Angular as opposed to AngularJS is that you have to have a full SPA (Single Page Application) app overarching everything and there is no longer a way to just have Angular nested in a div. Of course, now there is a way with Angular Elements to some limited extend. You may inject Angular within JSP (Java Server Pages) or Jade for example. Someone in the crowd asked if you could have Angular Elements inside of an Angular application. The answer was yes. Can the two crosstalk? Maybe if they are of the same runtime (version/environment) though David seemed unsure. Angular CLI does not support builds nor offer boilerplate code for Angular Elements yet which is yet another thing that makes this stuff so painful. I guess while I am on a roll, let me mention that just because this stuff looks like Angular components you should not think that you can have events back out in the same way with the familiar parenthesis syntax. Instead you have to write boilerplate JavaScript to catch events. In tsconfig.json in Angular, when baking Angular components, you will want to set your target for transpilation to ES2015. Use AOT (ahead of time) compilation. If you have the same Angular Element several times on the same page a lot of boilerplate code will be repeating itself in terms of what is coming up to the browser. Custom Elements Everywhere has some scoring on how well custom elements play with existing frameworks including wacky things you've never heard of like Dio.js and Dojo 2 (There is a Dojo 2???). React does not rate so well in their eyes. Use...
gzip -v elements.js
...at the CLI to GZIP (GNU zip) to, I suppose, minify code and the like. The -v is for verbose and you don't want to rename variables to terser things. Something random that was mentioned was that a "computed" in Vue's paradigm is a way to call a function by a plain text name. I've ran into David Stanich a few times at these events before. He works for IBM in Rochester, Minnesota and commutes in to virtuwell's office in St. Paul, Minnesota for AngularMN once a month. To hear him speak, IBM has a building in Rochester that is a mile long. Thanks to Keegan Jones (left) and Will Buck (right) for hosting this event.
Addendum 11/1/2019: By Angular Materials above I surely meant Angular Elements. Also Angular Materials is really Angular Material.
No comments:
Post a Comment