LWC how to remove a DOM element that is rendered by another lightning component? - salesforce-lightning

For example I use in a LWC that I build.
Is it possible to remove an element (for example ) that exists only after is rendered?
I tried to use query selector inside my .js file:
this.template.querySelector('h3');
But I can't find the target element this way.

Related

using Serenity-js framework ,how to locate a shadow element whose parent has an id which is a normal DOM

please tell me how i can locate an element in the below form using serenity-js Target.
Below is my Dom to the page i am trying to automate.
so here its a dropdown which you can see as which has id="splc" which is a normal DOM .. but the content inside that dropdown are all shadow elements.
my requirement is to access the content in dropdown.
Now i am not able to even click on the dropdown by normal xpath on px-component tag ( which is normal DOM) .
Inside that px component tag I can see that it has a shadow element #label which is exact element i need to click.
Problem is in my html page , all the dropdown has the same #label as the shadow element and their parent is a normal xpath with unique id.
When i use the Jquery on the chrome console
$("html #splc /deep/ div#label").click()
i can click the desired dropdown.
But how can i do the same with serenity-js frame work.
i want to do the below functionality that i have in protractor using SERENITY-JS concept .
static dropdown = element(by.id("splc")).element(by.deepCss("#label"));
Since serenity-js expects a target always since the Task needs that in activity. How can do the same ?
please help me.
From what I can see, by.deepCss is nothing more than a wrapper around by.css:
deepCss(selector: string): Locator {
return By.css('* /deep/ ' + selector);
};
If that's the case, then the following:
element(by.id("splc")).element(by.deepCss("#label"))
could be represented as:
element(by.css("#splc /deep/ #label"))
as per your jQuery example.
Now, if the above works, you should be able to define a Target as follows:
const Dropdown = Target.the('Dropdown').located(by.css("#splc /deep/ #label"))
Hope this helps!
Jan

E4 contribute with a shared element

My application is built from multiple plugins/model fragments. I am trying to contribute with a shared element (a part) in one of my fragments. I don't have access to the main e4xmi file (the one that contains the Trimmed Window) so it has to be done within my fragment. Any way I can do this ?
In your fragment.e4xmi just add a Model Fragment specifying the id of the parent Trimmed Window as the 'Extended Element ID' and 'sharedElements' as the 'Feature Name'. Add your part to the
Something like:

How to configure TinyMCE to allow block-level elements inside inline element?

I have an HTML where inline element span which hold block element example div. I have pasted below HTML source in the source view of TinyMCE and press Ok
<span>plain text<div>test div</div></span>​
Further, I have click on the source view and HTML it changes to the below HTML where span automatically gets closed and new span added to the HTML,
<p><span><span>plain text</span></span></p>
<div>test div</div>
<p>​</p>
I know, we can't have block element inside the inline element(i.e. HTML global rule), but I am not in position to make changes in the current system.
Update: I have tried to solution mention here but not worked well: https://stackoverflow.com/a/14603631/4420468
There is a config option to control this behavior.
valid_children
The valid_children enables you to control what child elements can exists within specified parent elements.
see docs for further information

GWT Query selector not working

GWT Query selector i.e. $("#id") not working inside callback function. However xyz.find("#id") works, where xyz -> Gquery variable. Is it that callback function doesn't support $ selector or is there some other problem.
Are you sure that the element with id "id" is attached to the dom when the callback function is called ?
When you execute $("#id"), gQuery try to find elements matching the selectors within the set of elements of the DOM tree .
When you execute xyz.find("#id"), gQuery try to find elements matching the selectors inside the array of elements selected by xyz no matter the elements are still or not in the dom tree.

JQuery. Accessing Elements in the DOM below and object

I'm using an API that returns a JQuery Object which is a reference to a DIV container. I know my structure inside of the DIV container. I basically need to read some attributes from the first .
I've tried chaining the standard selectors off of my object but I get an error.
XML filter is applied to non-XML value ({selector:"div.panes > div.slice(0,1)", context:({}), 0:({}), length:1})
[Break on this error] var svideo = $(api.getCurrentPane()).('a').get(0);
Change your code to use .find() when you're going for descendant elements, like this for the DOM element reference directly:
$(api.getCurrentPane()).find('a').get(0)
//or..
$(api.getCurrentPane()).find('a')[0]
or if you want a jQuery object...
$(api.getCurrentPane()).find('a:first')
//or..
$(api.getCurrentPane()).find('a:eq(0)')
//or..
$(api.getCurrentPane()).find('a').eq(0)