Comments (8)
Personally I'm still concerned with (what I would call it) the asynchronous nature of custom elements.
Do you agree with this wording?
I agree so much that I've proposed more reliable alternatives https://itnext.io/a-wicked-custom-elements-alternative-6d1504b5857f
from document-register-element.
I wish it was that simple, unfortunately it isn't.
If the node is already on the document, and the document is fully parsed, and you define your custom element, there are no issues in reading, or even modifying, the node within its constructor, or within its attributeChanged callback.
However, this is not the case if the element is pre-defined and encountered while parsing the document.
In any case though, even the connectedCallback isn't safe to modify the node content, because the connected is invoked synchronously on node tag opened, but not necessarily on node tag closed.
Accordingly, it's basically impossible through Custom Elements to be sure that a node content can be modified, and the only safe option to mutate such element is to use its Shadow Root element instead of the regular content.
Or ... you need to define your components on document loaded.
Or ... you need an indirection that tries to fix all these issues for you, like https://github.com/WebReflection/html-parsed-element#html-parsed-element does.
from document-register-element.
Thanks for your fast, detailed and clear feedback.
Personally I'm still concerned with (what I would call it) the asynchronous nature of custom elements. Do you agree with this wording?
In my opinion this basic asynchronous concept introduces most of the complexity involved with ce.
And I'm still thinking how to express this factor clearly within the diagram.
Thanks for the link, I will look into it.
from document-register-element.
PS: great link, indeed connectedCallback
and the fact that it can be called multiple times is not deterministic.
from document-register-element.
This example below of this part of the spec also clearly demonstrates the "queued" integrity issue of connectedCallback
:
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance
from document-register-element.
Really Awesome. You have just eliminated this asynchronicity design issue 🚀
IMHO I'm having a hard time to argue that custom elements are fragile and forces all developer's to rethink their synchronous paradigms to async 😱
I will try wickedElements
from document-register-element.
In general I think that the fundament challenge is, that HTML and HTTP was never designed for components nor apps. It was made for documents being represented by hypertext.
from document-register-element.
@WebReflection
I made some updates:
https://andyogo.github.io/custom-element-reactions-diagram/
from document-register-element.
Related Issues (20)
- LifeCycle events order of nested custom elements inconsistent across Chrome and Firefox HOT 18
- Built-in elements don't work in Firefox HOT 6
- TypeError: new.target does not define a custom element HOT 3
- document.registerElement is deprecated and will be removed in M73 HOT 3
- Post-install script slowness HOT 3
- [Uncaught DOMException: Failed to execute 'registerElement' on 'Document'] when used in Chrome Extension HOT 16
- Functions are not evaluated in connectedCallback HOT 1
- `this` reference in contructor broken HOT 14
- Multiple instances of the polyfill leads to unexpected behaviour HOT 1
- error ""Failed to construct 'HTMLElement': Please use the 'new' operator"" when using with Angular/elements 8.2.0 HOT 2
- Refreshing a document inside an iframe which loads d-r-e breaks the polyfill and leaves document.createElement as undefined HOT 15
- `attributeChangedCallback()` bound value is invalid HOT 15
- Add DRE to Polyfill.io service HOT 1
- [QUESTION] Unable to get property '_isMounted' of undefiened. HOT 1
- TypeError - Object doesn't support property or method 'registerElement' HOT 3
- Time to compare again? (webcompents/custom-elements) HOT 2
- Polyfill does not seem to be working in IE 11 HOT 6
- postinstall fails in noexec enviornment HOT 1
- We unable to install latest version @1.14.7 HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from document-register-element.