This question already has an answer here:
Nested element (web component) can't get its template
(1 answer)
Closed 6 years ago.
I play with webcomponents using webcomponents.js and Shadydom polyfills.
My code is on Github : https://github.com/olofweb/webcomponents-action-bar
The first webcomponent is my-action-2. It is a button with a title. The second webcomponent is my-action-bar. The goal is to programmatically add my-action-2 into my-action-bar.
For this, my-action-bar has an addAction() method who create a new my-action-2 element and add it to the shadow DOM.
The problem is on my-action-2, line 33. Whenmy-action-2 is nested in my-action-bar, then the shadowRoot variable represent the shadow DOM of my-action-bar instead of my-action-2 !
It was a duplicate.
Github project updated if anyone is interested.
Related
This question already has answers here:
What is the difference between 'remove' and 'removeChild' method in JavaScript?
(2 answers)
Closed 2 years ago.
I am developing a website. There are a lot of spots, where I have to remove the html element. The previous, main contributor used to do it like this:
var elem = document.getElementById('element');
elem.parentNode.removeChild(elem);
I'm wondering why didn't he just use
elem.remove();
instead.
I've gotten to the point, where the first method didn't work and returned an error, but the second one worked perfectly. Of course I wanted to stick with the code standard in this project, so my first try was to use parentNode.removeChild. Unfortunatelly I cannot contact that person to ask why is it done like that.
What is the difference between these two and can I safely replace those?
As from MDN, the two are equivalent. The .remove() was inspired by jQuery and was implemented much later. IE does not support it.
If you don't need IE, you can safely replace parentNode.removeChild, but if you will transpile the code, the replace method have polyfill using parentNode.removeChild method...
Source of the answer
How is remove different from removeChild?
remove only needs a reference to the child. removeChild needs a reference both to the parent and the child. The result is identical.
Also you might think ,Is there any way to ensure that element is actually removed from memory?
No. You can only unreference it and hope that there is a garbage collector which will detect the object is not referenced and then will remove it.
This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Is there a spec that the id of elements should be made global variable?
(5 answers)
Closed 4 years ago.
What is better and what is the difference (performance, browser support...)?
I thought that DOM elements that have an id automatically create in a window object so you don't need to find them in DOM through getElementById. Am I right and what problems it could bring? I can't find any documentation on such a possibility of js window object.
Examples with window:
window['elementId'];
window.elementId;
The same result as getElementById and querySelector
This question already has answers here:
How to select Fabric.js object programmatically
(4 answers)
Closed 5 years ago.
I would like to select a object by run function instead of by mouse click. But I couldn't find the function from the docs for Fabric JS.
js
canvas.setActiveObject();
can't work in 2.0.0-beta.4 ,I solved it by change the version to 1.7.17.
This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Closed 7 years ago.
I've always noticed that Chrome assumes variables based upon elements within an HTML document that have an ID.
For example, if I had <video id="video" src="foo.webm"></video> on my page, the variable "video" would be created automatically by the browser. No need to type out var video = document.getElementById("video");
Is this a standard browser feature? Is it something that is here with us to stay? Should I take advantage of this or be wary of it? I like it because it saves precious bytes, especially when you have a ton of element objects to define.
Variables are not created that way.
document.getElementById("video") means you are selecting the "video" element, not variable. Checkout CSS Selectors
This question already has an answer here:
Understanding Polymer data-binding and HTML tags
(1 answer)
Closed 7 years ago.
I'm trying to lean Polymer and I'm looking at this tutorial.
The problem that i'm experiencing is a the Declary a property section, if i don't put the template {{owner}} in a span or b it doesn't get interpreted.
So my question is basically if this works
This is <b>{{owner}}</b>'s configurable-name-tag element.
Why doesn't this ?
This is {{owner}}'s configurable-name-tag element
Notice the missing <b>.
Plunk
This is because Polymer v1, unlike v0.5, doesn't support string concatenation.
The binding annotation must currently span the entire content of the tag, as you can read on the official documentation: https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#binding-to-text-content