Skip to content

Commit 2378f26

Browse files
caridyjodarovepmdartus
authored
first draft for LightningElement.CustomElement abstraction (salesforce#7)
* first draft for LightningElement.CustomElement abstraction * update meta for rfc app * wip: change to CustomElementConstructor * wip: review comments * Update 0000-custom-element.md * Update RFC status Co-authored-by: Jose David Rodriguez Velasco <jodarove@gmail.com> Co-authored-by: Pierre-Marie Dartus <p.dartus@salesforce.com>
1 parent db7f38d commit 2378f26

File tree

1 file changed

+63
-0
lines changed

1 file changed

+63
-0
lines changed

text/0000-custom-element.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
title: Custom Element Constructor
3+
status: IMPLEMENTED
4+
created_at: 2019/07/05
5+
updated_at: 2020/06/12
6+
champion: Caridy Patiño (caridy)
7+
implementation: https://github.com/salesforce/lwc/pull/1395
8+
pr: https://github.com/salesforce/lwc-rfcs/pull/7
9+
---
10+
11+
# Custom Element Constructor
12+
13+
## Summary
14+
15+
Facilitate the registration of LWC Constructor as Custom Elements.
16+
17+
## Motivation
18+
19+
As of today, the way to generate a qualifying Custom Element from a LWC Constructor, is via an experimental API: `buildCustomElementConstructor()`. Since this is a primary use case for LWC, we want to make it more ergonomic, and simpler. Additionally, the experimental API allow you to generate more than one Custom Element per LWC Constructors, which does not align with the web components semantics.
20+
21+
## Goals
22+
23+
1. Provide a dead simple way to register a custom element from a LWC Constructor.
24+
2. Preserve the web components semantics.
25+
26+
## Proposal
27+
28+
This proposal provides a high-level API (an abstraction layer) for authors to access the custom element associated to a LWC Constructor:
29+
30+
```js
31+
import XFoo from 'x/foo';
32+
customElements.define('x-foo', XFoo.CustomElementConstructor);
33+
// using tagName `x-foo`:
34+
document.body.appendChild(document.createElement('x-foo'));
35+
```
36+
37+
Pros:
38+
* it is extremely simple.
39+
* it reads very nicely in plain english.
40+
* it preserves the semantics of web components in a way that you can't bend them.
41+
42+
Cons:
43+
* it can't be statically analyzed (but since we don't use this in platform, that should be ok).
44+
* it does not provide a way for you to control whether or not you want open or closed shadowRoot (this is fine because consumers should not be in control)
45+
46+
### Semantics and Invariants
47+
48+
* There is a 1-1 mapping between LWC Constructors and the corresponding Custom Element.
49+
* Claiming the Custom Element for the abstract `LightningElement` must be disallow.
50+
51+
### Implementation Details
52+
53+
`LightningElement.CustomElementConstructor` is a static getter that can be accessed by any Constructor extending `LightningElement`. This getter can rely on the `this` value, which points to the sub class. This can be used in a Map to link the LWC to the Custom Element. This is very similar to the trick we use in `LightningContextElement.Provider` for context.
54+
55+
As a consequence of this change, the existing experimental API can be deprecated.
56+
57+
## Adoption strategy
58+
59+
This is a brand new feature, we just need to document it.
60+
61+
## How we teach this
62+
63+
* The consumer aspect of it is very straight forward considering that they don't have to learn a new API, just a static field name in LWC Constructors.

0 commit comments

Comments
 (0)