Giter Site home page Giter Site logo

Comments (8)

WebReflection avatar WebReflection commented on June 20, 2024 3

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.

WebReflection avatar WebReflection commented on June 20, 2024 1

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.

AndyOGo avatar AndyOGo commented on June 20, 2024

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.

AndyOGo avatar AndyOGo commented on June 20, 2024

PS: great link, indeed connectedCallback and the fact that it can be called multiple times is not deterministic.

from document-register-element.

AndyOGo avatar AndyOGo commented on June 20, 2024

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.

AndyOGo avatar AndyOGo commented on June 20, 2024

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.

AndyOGo avatar AndyOGo commented on June 20, 2024

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.

AndyOGo avatar AndyOGo commented on June 20, 2024

@WebReflection
I made some updates:
https://andyogo.github.io/custom-element-reactions-diagram/

from document-register-element.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.