chore(customElementRegistry): add carbonElement decorator #10080
Conversation
andy-blum
requested review from
RichKummer,
IgnacioBecerra,
jkaeser and
proeung
|
Deploy preview created for package Built with commit: 6d7db476e1d4a5981a1cb2c5ce24ec0e52447de7 |
|
Deploy preview created for package Built with commit: 57a675a6e339cbc90df1fd0ce9d21576329c8810 |
|
Deploy preview created for package Built with commit: 6d7db476e1d4a5981a1cb2c5ce24ec0e52447de7 |
|
Deploy preview created for package Built with commit: 6d7db476e1d4a5981a1cb2c5ce24ec0e52447de7 |
|
Deploy preview created for package Built with commit: 6d7db476e1d4a5981a1cb2c5ce24ec0e52447de7 |
|
Deploy preview created for package Built with commit: 1529b07313a121c84cbb249daf6e1d2c3a05263c |
|
Additional context around why this isn't a part of the lit framework: |
proeung
added
package: web components
|
@kennylam @IgnacioBecerra We'd love to get your thoughts on this new decorator approach for the custom element registry errors (#9940). |
|
Deploy preview created for package Built with commit: 1529b07313a121c84cbb249daf6e1d2c3a05263c |
andy-blum
added
the
test: CDN preview
|
Deploy preview created for package Built with commit: 6d7db476e1d4a5981a1cb2c5ce24ec0e52447de7 |
|
Deploy preview created for package Built with commit: 6d7db476e1d4a5981a1cb2c5ce24ec0e52447de7 |
emyarod
added
the
Ready to merge
…ign-system#10080) ### Related Ticket(s) Closes carbon-design-system#9940 ### Description This PR takes a new approach, and offers some advantages of carbon-design-system#9941. While the other PR aims to separate class definitions from their registration in the browser, and should work well for teams or projects that wish to _extend_ C4IBM components, it does nothing to solve the problem for teams that are _double-consuming_ C4IBM components. For example, consider the widget team: - They are building widgets using the react-wrapper version of the components - When the react component imports the element, it brings along its `customElements.define()` method - The widget is placed on a page that is already using the C4IBM CDN links, which _also_ bring along the `customElements.define()` method. - Both the widget script and the CDN link are rolled up into separate scripts and whichever one runs second will encounter the unexpected error, not know how to handle that problem, and halt execution of the script, likely leaving large pieces of setup functionality unprocessed This new approach offers a method for elements to _attempt_ to define themselves, but to gracefully handle the failure and to continue executing the remainder of the running script. The new decorator is a simple copy/paste from the LitElement `@customElement` decorator, with the `customElements.define` functions wrapped in a try/catch block. As of right now, this only impacts one component and is simply a proof-of-concept. ### Changelog **New** - Adds a `@carbonElement()` decorator to the carbon-web-components package **Changed** - Edit the carbon-web-components package's accordion-item component to use @CarbonElement
…ign-system#10080) ### Related Ticket(s) Closes carbon-design-system#9940 ### Description This PR takes a new approach, and offers some advantages of carbon-design-system#9941. While the other PR aims to separate class definitions from their registration in the browser, and should work well for teams or projects that wish to _extend_ C4IBM components, it does nothing to solve the problem for teams that are _double-consuming_ C4IBM components. For example, consider the widget team: - They are building widgets using the react-wrapper version of the components - When the react component imports the element, it brings along its `customElements.define()` method - The widget is placed on a page that is already using the C4IBM CDN links, which _also_ bring along the `customElements.define()` method. - Both the widget script and the CDN link are rolled up into separate scripts and whichever one runs second will encounter the unexpected error, not know how to handle that problem, and halt execution of the script, likely leaving large pieces of setup functionality unprocessed This new approach offers a method for elements to _attempt_ to define themselves, but to gracefully handle the failure and to continue executing the remainder of the running script. The new decorator is a simple copy/paste from the LitElement `@customElement` decorator, with the `customElements.define` functions wrapped in a try/catch block. As of right now, this only impacts one component and is simply a proof-of-concept. ### Changelog **New** - Adds a `@carbonElement()` decorator to the carbon-web-components package **Changed** - Edit the carbon-web-components package's accordion-item component to use @CarbonElement
Related Ticket(s)
Closes #9940
Description
This PR takes a new approach, and offers some advantages of #9941.
While the other PR aims to separate class definitions from their registration in the browser, and should work well for teams or projects that wish to extend C4IBM components, it does nothing to solve the problem for teams that are double-consuming C4IBM components. For example, consider the widget team:
customElements.define()methodcustomElements.define()method.This new approach offers a method for elements to attempt to define themselves, but to gracefully handle the failure and to continue executing the remainder of the running script. The new decorator is a simple copy/paste from the LitElement
@customElementdecorator, with thecustomElements.definefunctions wrapped in a try/catch block.As of right now, this only impacts one component and is simply a proof-of-concept.
Changelog
New
@carbonElement()decorator to the carbon-web-components packageChanged