How do I pass data to a slotted element in Lit?
I’ve tried…
<my-component>
<slot .mydata=“${this.mydata}”> <\slot>
<\my-component>
But doesn’t seem to work, is programmatically the only way to do this?
We use slot on parent element.
Default (unnmamed) slot
<div class="parent>
<slot></slot>
</div>
Named slot
<div class="parent>
<slot name="slot-name"></slot>
</div>
Then insert html tag inside parent by using slot.
<main-parent>
<div slot="slot-name"></div>
</main-parent>
For default slot,you don't need to add slot attribute.
Note: Slot is used to insert external html inside parent element.
If you don't need to insert html, you don't need to use slot.
For pass data from parent to child.
<next-child childattr=${this.mydata} ></next-child>
For pass from child parent.
You need to dispatch custom event with bubbles:true
How to remove a label in element and add image to same using tritium
how can i add a sprint image in place of that element
<div id="TopMenu">
<ul style="display:">
<li style="display:" class="First">My Account</li>
<li style="display:" class="CartLink">View Cart <span></span></li>
</ul>
</div>
First in your snippet there is no label element...
But remove to any element use 'remove' function.
i.e. remove('label') //this will remove all label in scope
Now you also want to add sprite image.
1. Just add your images in folder name as 'sprites'
--path-- /assets/images/sprites
2. Now it will include in sprites.png auto When Moovweb project run
3. use class 'sprites-'+imagename where you want to place.
Assume I have the following HTML snippet
<div id="parent_div">
<!-- First div -->
<div>
Hi <span>Dave</span>, how are you?
</div>
<!-- Second div -->
<div>
Hi, how are you?
</div>
<!-- Third div -->
<div>
Hi <span>Jenny</span>, how are you?
</div>
<!-- Fourth div -->
<div>
<span>Ryan</span>
</div>
</div>
I would like to use XPATH to find the divs that contain BOTH a span and text. So, in the above example, I would like to find the first div and the third div only. The second div cannot be selected because it does not contain a span (contains text only), and the fourth div cannot be selected because it only contains a span (does not contain text)
How can I do that in XPATH? I am using PHP if that matters.
You can try using this XPath :
//div[text()[normalize-space(.)] and span]
Above XPath will select <div> element that has child : <span> element and non-empty text node (to skip text nodes containing only line-breaks)
suppose I have a html markup like this:
<div>
<p>
this is the parent
<p>
this the child
</p>
</p>
<p>
this is the parent
<p>
this the child
<p>this is third child</p>
</p>
</p>
</div>
In the div I have five <p> tags,but I want only use jquery selector to select the two top parent p tag without class and id name
Is it possible?How can I achieve that?
of course, just do
$('div').children('p)
children only select the direct children of an element. Don't forget to set an id to your div...
I have a certain element that I can select with Selenium 1.
Unfortunately I need to click the parent element to get the desired behaviour. The element I can easily locate has attribute unselectable, making it dead for clicking. How do I navigate upwards with XPath?
There are a couple of options there. The sample code is in Java, but a port to other languages should be straightforward.
Java:
WebElement myElement = driver.findElement(By.id("myDiv"));
WebElement parent = (WebElement) ((JavascriptExecutor) driver).executeScript(
"return arguments[0].parentNode;", myElement);
XPath:
WebElement myElement = driver.findElement(By.id("myDiv"));
WebElement parent = myElement.findElement(By.xpath("./.."));
Obtaining the driver from the WebElement
Note: As you can see, for the JavaScript version you'll need the driver. If you don't have direct access to it, you can retrieve it from the WebElement using:
WebDriver driver = ((WrapsDriver) myElement).getWrappedDriver();
Little more about XPath axes
Lets say we have below HTML structure:
<div class="third_level_ancestor">
<nav class="second_level_ancestor">
<div class="parent">
<span>Child</span>
</div>
</nav>
</div>
//span/parent::* - returns any element which is direct parent.
In this case output is <div class="parent">
//span/parent::div[#class="parent"] - returns parent element only of exact node type and only if specified predicate is True.
Output: <div class="parent">
//span/ancestor::* - returns all ancestors (including parent).
Output: <div class="parent">, <nav class="second_level_ancestor">, <div class="third_level_ancestor">...
//span/ancestor-or-self::* - returns all ancestors and current element itself.
Output: <span>Child</span>, <div class="parent">, <nav class="second_level_ancestor">, <div class="third_level_ancestor">...
//span/ancestor::div[2] - returns second ancestor (starting from parent) of type div.
Output: <div class="third_level_ancestor">
Let's consider your DOM as
<a>
<!-- some other icons and texts -->
<span>Close</span>
</a>
Now that you need to select parent tag 'a' based on <span> text, then use
driver.findElement(By.xpath("//a[.//span[text()='Close']]"));
Explanation: Select the node based on its child node's value
Take a look at the possible XPath axes, you are probably looking for parent. Depending on how you are finding the first element, you could just adjust the xpath for that.
Alternatively you can try the double-dot syntax, .. which selects the parent of the current node.
This might be useful for someone else:
Using this sample html
<div class="ParentDiv">
<label for="label">labelName</label>
<input type="button" value="elementToSelect">
</div>
<div class="DontSelect">
<label for="animal">pig</label>
<input type="button" value="elementToSelect">
</div>
If for example, I want to select an element in the same section (e.g div) as a label, you can use this
//label[contains(., 'labelName')]/parent::*//input[#value='elementToSelect']
This just means, look for a label (it could anything like a, h2) called labelName. Navigate to the parent of that label (i.e. div class="ParentDiv"). Search within the descendants of that parent to find any child element with the value of elementToSelect. With this, it will not select the second elementToSelect with DontSelect div as parent.
The trick is that you can reduce search areas for an element by navigating to the parent first and then searching descendant of that parent for the element you need.
Other Syntax like following-sibling::h2 can also be used in some cases. This means the sibling following element h2. This will work for elements at the same level, having the same parent.
We can select the parent tag with the help of Selenium as follows:
driver.findElement(By.xpath("//table[#id='abc']//div/nobr[.='abc']/../.."));
this will help you to find the grandparent of the known Element. Just Remove one (/..) to find the immediate Parent Element.
Like:
driver.findElement(By.xpath("//table[#id='abc']//div/nobr[.='abc']/..));
There are some other ways to implement this, but it worked fine for me.
You can do this by using /parent::node() in the xpath. Simply append /parent::node() to the child elements xpath.
For example:
Let xpath of child element is childElementXpath.
Then xpath of its immediate ancestor would be childElementXpath/parent::node().
Xpath of its next ancestor would be childElementXpath/parent::node()/parent::node()
and so on..
Also, you can navigate to an ancestor of an element using
'childElementXpath/ancestor::*[#attr="attr_value"]'. This would be useful when you have a known child element which is unique but has a parent element which cannot be uniquely identified.
Have once way you don't need to execute script and you still get the parent element:
// identify element
WebElement ele =driver.findElement(By.xpath("//*[#id=\"ext-gen6\"]/div[5]/"));
//identify parent element with ./.. expression in xpath
WebElement parent = ele.findElement(By.xpath("./.."));
The key word here is xpath "./.."