What do we need to do in a Custom Element's adoptedCallback? - javascript

I've read various docs on Custom Elements and adoptedCallback, which say things like "called when the element is adopted into another document, i.e. when someone calls Document.importNode(customElement)". But this is not very much information.
What do I actually need adoptedCallback for? In other words, what will adoptedCallback be useful for in particular? What are some practical examples? What would a custom element author specifically want to achieve with adoptedCallback? What are scenarios that many custom element authors aren't thinking about, but that they should consider and handle in adoptedCallback?

The main use case that I see is when you want to move some custom elements.
If you have a custom element in an <iframe> and want it to move to another <iframe> or to the main document, you may want to realize some operations when the custom element owner document has changed, but not when the custom element was moved inside the same <iframe> or document.
Example: a IDE with drag and drop from the toolbar to the target HTML document.
Another use case, you may need to proceed to some expensive operations (calculation, data loading) in the custom element only one time when you import it (in adoptedCallck()), not everytime you connect it (in connectedCallback()).
Example: a sheet/table with remote data.
It was also the case with HTML Imports but now it's less relevant.

Related

How to use actions globally in svelte?

I need to traverse the DOM tree for a specific attribute "tooltip". For each element that is found to have this attribute, we'll render a tooltip upon mousemove event on it. If I could make an action global that'll be perfect for this job. Normally this would be done by using use:myAction directive on each and every element.
Doing it this way improves the DX instead of heaving a separate Tooltip Component. And using it
I'm not going with the CSS method because I'll need to render html too inside the tooltip.
That I'd be able to do in svelte with #html.
P.S I'm not looking for "Why would you..." response. But if there is a better methodology for doing tooltips especially when you need a lot of them, I'll be more than happy to hear.

Listening for changes in HTMLCollection (or achieving a similar effect)

I need to create a simple tooltip library that works like this:
every DOM element with a specific attribute combination (like class="tooltip", data-tooltip-text="some text") automatically displays a tooltip (containing text from data attr) on hover.
This behavior must persist through external DOM manipulation. I really like the idea of utilizing a HTMLcollection for this, for its "live" nature, as iterating the whole DOM with every DOM change sounds potentially very demanding.
Now I would love to watch/listen the collection and run a sequence every time it changes (iterate through the nodes, see if they have a listener, add it if they don't).
How do I do this? The watch and observe methods seem to (if I understand correctly) be capable of that, but they are now deprecated. MDN says that Proxy covers most use cases, but does it cover mine (I haven't found a way to make it work)? Or is there some other way I'm missing?
And what about MutationObserver? I assume that deep-observing the whole application and repeatedly fetching a new NodeList via querySelectorAll with every single change would be too demanding (the library should run over a React application). Dynamically committing the HTMLCollection (as a value) into DOM via React and then (shallowly) listening for changes with MutationObserver might work, but I doubt that would be a good idea either.

Algorithm to update only the changed innerHTML of the document

I have 2 JS variables. before and after. They contains the SAME html document, but have some modification. About 1%-10% change between them. I want to update the body from before to after. The variablesbefore and after are raw string.
I can do something like that:
document.documentElement.innerHTML=after
The problem is that if I render this way it not look good. The render takes time, and there is a white screen between the renders. I want to show the user 10 modification in a second (video of modifications)
So what I want to do. I want to search and find only the elements that changed only by analyze the HTML text of before and after.
My way of solution:
I can find the changes and the position in the text using Javascript Library for diff & match & patch.
The question is:
After I find the text changes. How to find only the elements who changed. I update only those elements.
I thought, maybe to create a range, that contains every change, and update the range, but how exactly to do that?
If anything unclear, please comment, I will explain better.
I found a very good library for it: https://github.com/patrick-steele-idem/morphdom
Lightweight module for morphing an existing DOM node tree to match a
target DOM node tree. It's fast and works with the real DOM—no virtual
DOM here!
Very easy to use, and doing exactly what I need
If I have understood your question correctly, then what I would have done is,
1) Make a new object (view Object) which will control the rendering of DOM elements. (Similar to MVC)
2) In this object, I would have created 3 functions.
a) init function (contains the event-handlers)
b) render1 function (which will contain elements in before element)
c) render2 function (which will contain elements in after element)
Whenever there is an event where I need to change the HTML of a class/id/body/document, I will change that in init function and call render2 function which contains the after element.
This should not give any error, however the browser has to work to render all the page, but rendering can be divided over multiple elements of document. So, whenever you need to render a part of document, make separate render functions.
p.s. there can be different approaches.
You must implement the LCS(Longest Common Subsequence). To understand better of this algorithm you can watch this youtube video. Also It's easier to first study Longest Common Substring.
I think I have a solution. virtual-dom can do the work for me. I can create two VTree, make a diff, and apply a patch.
From the documentation of virtual-dom:
virtual-dom is what I need.
Manual DOM manipulation is messy and keeping track of the previous DOM
state is hard. A solution to this problem is to write your code as if
you were recreating the entire DOM whenever state changes. Of course,
if you actually recreated the entire DOM every time your application
state changed, your app would be very slow and your input fields would
lose focus.
virtual-dom is a collection of modules designed to provide a
declarative way of representing the DOM for your app. So instead of
updating the DOM when your application state changes, you simply
create a virtual tree or VTree, which looks like the DOM state that
you want. virtual-dom will then figure out how to make the DOM look
like this efficiently without recreating all of the DOM nodes.
virtual-dom allows you to update a view whenever state changes by
creating a full VTree of the view and then patching the DOM
efficiently to look exactly as you described it. This results in
keeping manual DOM manipulation and previous state tracking out of
your application code, promoting clean and maintainable rendering
logic for web applications.
https://github.com/Matt-Esch/virtual-dom

is it possible to view one html element twice on the same page, or must I create a duplicate?

I am creating a site that allows viewing and editing the contents of the 'src-div' contents within the 'edit-div.' I am not editing the src-div directly, because its thumbnailed using css zoom property.
I have considered using knockout.js to bind both elements to an observable. Currently, I have implemented the feature with jquery .html() function: simply set edit-div innerhtml to src-div innerhtml on 'select', and reverse the process after changes are made to edit-div to update the src-div.
I am wondering if I really need 2 divs here, or if there is some way to actually view the same element twice on a page, and any changes made will automatically reflect in both 'views,' elimiating the need to copy innerhtml property back and forth between two elements.
essentially, this is like a mirror effect, without the flip.
the closest thing I found so far is:
http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Reflections/Reflections.html
Any recommended practices for performing this task are appreciated.
(Almost) everything you see on a page has a counterpart in the DOM. Everything in the DOM gets exactly rendered one time (apart from pseudo-classes). And every node in the DOM can only have one parent (no exclusions).
Unfortunately you'll have to clone the specific node and add changes to both, as there is no copy & translate mechanism in the current CSS documentation.
If you're using jquery you can use one div and "clone" it. You can read this for more information.
http://api.jquery.com/clone/
If you set the class of the div to the same thing, you can have changes propagated to both. Then you can apply .addClass to the second div to apply a "reflected" affect (if that's your final goal).

Handling events from HTML anchor tags in ExtJS

I have a large application built in ExtJS and am looking for the best way to handle custom events from anywhere in the application. For example I might want to put an anchor tag in some text in the application which will open a custom component in my app. At the moment I listen to clicks on the body and if the target has a css class applied to it in a certain format I use that to perform an action.
For example I might have:
<a class="ACTION-View-Customers">View Customers</a>
My event handler will pull the classname apart and do the action. The problem with this approach is that it's difficult to pass many parameters through to the handler. What I propose is to use JSON inside the anchor's class or href tags, like so:
View Customers
Can you think of any problems with this approach and suggest any alternatives? Thanks.
I personally would not use additional meta in the HTML itself, if it can be helped. I would apply specific IDs to links of specific purpose, and bind a click event to that object. I've also found the DomQuery object (needed to find and reference the anchors) interesting to work with. Since I usually use the JQuery adapter with Ext JS, I'll use JQuery's selectors to locate the specific DOM element, and JQuery's bind functions [.click(fn)], while using Ext internal to the function itself. JQuery and Ext JS make a great combo, especially with the new JQuery 1.3.1, which really speeds things up.
I suggest using HTML5's data- attributes. For example:
View Customers
var eventsource = link.getAttribute("data-event");
HTH
As you might know, HTML tag accepts ANY named attribute. So you may create some specifically called attribute(s) and pass any value(s) to them (f.e. my-bogus-param="something"), By this you can develop any sophisticated parameter passing system. Then you can parse these attributes in event handler.

Categories