I am creating a sortable-list polymer element whose elements can be reordered using drag-n-drop operation. The problem is, I can't seem to get the elements inside a polymer element's shadowdom to react to drag-start event. However, interestingly, drag-over, drag-enter, drag-leave and drop events work fine.
Do elements inside shadowdom react to start-drag event?
You can find the code in the following link:
https://github.com/tejainece/sortable-list/tree/master/web/sortable-list
You can take a look at http://www.polymer-project.org/docs/elements/core-elements.html#core-drag-drop how they do it but I assume you are running into this Chrome bug https://code.google.com/p/chromium/issues/detail?id=264983. It is already marked as fixed but it takes a while until it lands in Dartium. If you have a recent Chrome version you can try if it works in Chrome.
Related
I'm about to finish developing an automated program on Python and the only thing that's stopping me it's a web element that gets immediately hidden when I try to inspect it from an OpenSea page (can't share the link here since it requires to be connected to my wallet):
So far, I have only managed to get the XPATH and the CSS_SELECTOR of this problematic element (div#tippy-298) which is the following:
button_problematic_xpath = driver.find_element(By.XPATH, '//*[#id="tippy-298"]')
button_problematic_css = driver.find_element(By.CSS_SELECTOR, '#tippy-298')
But what I need is to get the XPATH or CSS_SELECTOR of the Web Elements that button_problematic_css contains, more specifically the "Starting" and "Ending" Textboxes :
Also, just in case, the element that's on top of button_problematic_css is called "Duration", here's its XPATH:
button_duration = driver.find_element(By.XPATH, '//*[#id="duration"]').click #after clicked it deploys div#tippy-298 element
I was wondering if there could be any method to force the visibility of this button_problematic_css using the Chrome Console in the Inspection of Web Elements, or by using an specific method from Selenium on Python3.x to inmediately download all of the web elements this page has right after button_problematic_css is visible.
What I have tried so far is to manually inspect the element, by pressing Ctrl + Shift + C and and then clicking the elements contained in button_problematic_css which just ends up hiding this element before even clicking its content, the same happens when trying to display the contents of this element in the DOM of this page, it just dissapears.
I just wish my program could be capable of editing the dates in the "Starting" and "Ending" Textboxes
I guess you need to click the button to show the element. why did I guess? you need to show the url
or u can also try this code:
clickmore=WebDriverWait(driver, 2).until(EC.element_to_be_clickable((By.XPATH, 'blabalabla')))
self.driver.execute_script("arguments[0].click();", clickmore)
button_duration = driver.find_element(By.XPATH, '//*[#id="duration"]').click()
After several days of working, I managed to solve this, it happened that in order to get the XPATH from these particular elements, I had to use the Chrome Console and type $('#duration').click();.
In this case, #duration is a Selector that can be used to get the web element button that allows you to edit the period of time you want to set when clicked.
I guess the general statement would be something like this:
$('#your_css_selector').click();
Now, this way I could managed to look deeper in the DOM without making them hide again.
CodeSandbox demonstrating issue
I'm building a menu using Custom Elements. It works fine for keyboard and mouse users, but I noticed an issue when testing with a screenreader: all of my menuitems have no labels. You can see this in the Accessibility Inspector:
Each menuitem is essentially a custom element with a <slot> and some styling—that's it. When not using web components, if one does this:
<button role="menuitem">Foo</button>
Then the Chrome accessibility inspector will show "menuitem: 'Foo'" because it infers the name from the contents. With web components, this isn't the case—Chrome is showing no name. Here's a side-by-side comparison when I use the accessibility inspector inside the CodeSandbox I shared above.
Firefox and Safari both successfully infer the name of these menuitems. Chromium-based browsers are not. Is this a Chrome bug? Are the other browsers just working by coincidence? Is there anything I can do here? I'm really trying to avoid weird stuff where I pull the slot's innerText and add it to an aria-label or something.
I want to be able to append the #web-messenger-container element to an element instead of the document.body.
I've tried using Smooch.render without setting the embedded attribute to true and it works fine on some browsers, but on others, the smooch CDN calls are cancelled. It is related with this issue: https://github.com/smooch/smooch-web/issues/666
I don't want to use embedded mode, I just want to move the Smooch button to another container. I've tried moving the iframe element with JS but it causes the iframe to reload and the Smooch window disappears.
I would say if you want to append #web-messenger-container to a different element, embedded mode is the way to do that. Without embedded mode Smooch's host JS will call render() to append the iframe on it's own so trying to call it second time will give you nothing but grief I think.
If all you want is to render your own open/close button, that's pretty straightforward. You can specify a custom button width and height of '0', and trigger Smooch.open() / Smooch.close() however you like.
For example:
https://jsfiddle.net/alavers/ve5uhjnd/
I've run into a strange, and very recently introduced issue. It seems that a paper-input element inside a paper-icon-item no longer permits a 'space' in its entry. I have no idea why that is the case only inside a paper-icon-item, but here is the reproduction of the issue:
http://jsbin.com/herove/1/edit?html,output
paper-icon-item is not a valid element. Maybe you have to declare it as a custom element somewhere first?
If you change paper-icon-item to div it works fine.
The issue has been reported in Github repo here: github.com/PolymerElements/paper-item/issues/28
Also note that due to paper-item recently having button behaviour, it has caused other issues like tab-indexing, wherein the paper-item (or paper-icon-item) is now receiving focus on tab, rather than the paper-input inside of it.
Currently I have a polymer element which contains a form with a few different fields. I have a tabindex setup on the input elements, however this polymer element is repeated 5 times throughout the page.
When I use tab for navigation, instead of following the tabindex within each component first, it instead goes to tabindex 1 for each component. Then all the tabindex 2's, and so forth. Is there any way for the tabindex to be encapsulated with/in the shadow dom?
You might want to see a '7.2 Focus Navigation' section in the Shadow DOM spec.
http://w3c.github.io/webcomponents/spec/shadow/#focus-navigation
Tabindex should be scoped in each node tree. Google Chrome already supports that.
I've implemented that. :)
If you find any unexpected behavior in the implementation, please file a bug for Chrome: http://crbug.com/
If you find an issue for the spec, please file a bug for the spec: Click a 'file a bug' button displayed at the top-right corner in the Shadow DOM spec.