Wrapper custom element using vanilla js - javascript

TL;DR: I'm looking for slots but without shadow dom
I'm looking for a solution that should "change" something like:
<form-control>
element(s): like input, select, custom elements containing form elements
</form-control>
into something like:
<form-control>
<label></label>
<div>
element(s)
</div>
</form-control>
where form-control is the needed custom element; now specific for forms, but a general wrapper solution is a good thing to know
Solutions I think about:
using shadow dom and slots: that will be the natural solution, but until the form participation api will be widely supported it's not a solution; plus, including bootstrap css in every 'small' web component is overkill (and selecting only needed css classes is even more overkill), so I am using web components (with shadow dom) only at 'top' level elements (like a whole form, table, modal etc., the rest are only custom elements, without shadow dom)
"moving" children from custom element into that div: it works but if a child is a custom element then connectedCallback will be called twice (because it will be moved into dom); of course connectedCallback can be guarded (one time execution), but when the child element must async load something ... well, it 'smells' trouble; if somehow a custom element could be "moved" without disconnectedCallback/connectedCallback that should work fine, but I don't think that is possible
try to use (or inspire from) a bootstrap web component collection; unfortunately I could not find any framework based on bs5
Any idea will be appreciated!

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.

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

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.

jQuery to detect DOM changes

I am working on a jQuery plugin where I need to manipulate DOM for some insertions and deletions and I am required to work with some specific class (say class demo). I have to make it work with Angular/AngularJS/JS or any framework.
Problem I am facing is How can I detect that particular class visibility in DOM If user is hiding that element or say loading another component or routing to another page. (like in Angular2/4/5 we normally do with ngIf etc. )
I came across this livequery but it does not work as expected. Any link/example/suggestion would be grateful.
PS: and also I don't want to provide any function from my code, which is required to call in their component etc

Problems changing 'is' dynamically in Polymer

I'm trying to add a Polymer UI to an existing HTML page which contains a form. I don't have control over the content of the page, only the header and footer, so I can't change the form to use Polymer elements rather than <input>. So instead I'm trying to rewrite the form using Javascript.
I'm finding that adding an is attribute to an existing element has no effect --- the element doesn't get upgtaded.
I presume that this is all happening at a point after which Polymer has scanned the DOM looking for is attributes, so it's not noticing my change. (Although creating a new element with an is attribute and adding it also doesn't work, which is kind of weird, because adding a Polymer custom element does work.)
Is there any way around this; such as telling Polymer when I add the new element so that it can be upgraded properly?
To use is=, you must be extending a native element. These are called type extension custom elements (http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#usetypeextension).
In general, I don't believe adding the is= attribute at a later time has any effect on upgrading the element. The element needs to be declared up front with is= (e.g. <input is="core-input">) or instantiated dynamically using the special version of createElement:
var input = document.createElement('input', 'core-input');
In the declared case, this is the parsers signal to alter the prototype of the element when it's seen. In the JS case, that's done at creation time. If you just use el.setAttribute('is', 'core-input'), the element's prototype is already created by that point so it has no effect.

What are the best practices for creating new elements of different type in Angularjs?

I have a list of elements of different types. Each has a toggle which toggles their visibility. Now there are two ways to hide an element either detach it from DOM or set the visibility to hidden.
As I understand Angular still updates hidden elements so this may impact the performance. Is this true? With jQuery one can detach the element from DOM and then attach it again when it needs to be visible. But is this approach even a good practice in Angular?
From reading Angular documentation and its API it gave me an impression that Angular prefers that all templates/HTML are declared at the start and their content is dynamically changed with controllers. So if you want to add/remove elements you'd use an ng-repeat directive and then by removing elements from an array in the scope you can add/remove elements from the template. This works well with primitive elements of the same type. However, how does this work if you have a list of elements of different type?
Edited:
http://jsfiddle.net/k26bA
An example here would be a list of tools which can be made available with a checkbox. In the example the first approach has a static list of elements which can not be dynamically changed. Which means you need to know in advance which tools will be available.
The second approach has a list in the controller to which you add and remove tools and in the template use ng-repeat to iterate over that list and create the tools. However, I'm stuck here as a tool can be a button, a text field, checkbox or even a complex div.
I find it a little hard to have a model first here because this is just a part that hides and shows available controls as opposed to displaying a domain model.
A good example of what I'm thinking would be Google Maps where you can hide or minimise various controls on the map.
You probably need to familiarize yourself with the ng-switch directive. The inactive items in an ng-switch are entirely unhooked from the DOM, as opposed to an ng-hide or ng-show, which simply set the CSS styles to show or hide.

Categories