I'm working on a way to bind the Light DOM contents of an element into the Shadows. You can see the WIP at:
https://ele.io/mbleigh/contents-template
What I'm wondering here is how to support something akin to the bind attribute on templates. Is it possible to alter the binding of a template after it's been attached to the DOM? I know you can manually set node.model but I'd like to be able to use Polymer's text binding syntax so that the element could be something like:
<contents-template bind="{{data as user}}"></contents-template>
Or something like that. Anything that would allow me to basically "pass through" that bidning on the external element to an internal template would be helpful.
Related
I have an external blazor component with 2 attributes like below. I am resolving through a function by passing the value of Href attribute.
<ComponentLink Href="bookings" Active=#GetCurrentLink("bookings")>
1my question is there any way to reference or bind the value of attribute value directly from another attribute without passing through a variable.
Basically something like
<ComponentLink Href="bookings" Active=#GetCurrentLink(#Href)>
I am asking this because it is within link list for a navigation and i dont want to create a fiel or property for each Href element. I can fix it on the ComponentLink source code possibly but I don't have source code access as it is in nuget package.
I have tried using #ref but It also doesnt help as intented.
There is no easy way to achieve this.
You can look at the component definition in the same way as the class constructors. You will have the same problem when you want to pass the same value there.
The best option, in this case, is to extract the text in the variable and reuse it.
You can also define your links in your C# code as an array and just enumerate the links to render the ComponentLink components dynamically.
Here is an example of this approach: https://blazorrepl.telerik.com/wmFYwAvG39LqBZFb06
The option with the #ref is not working, because the #ref value is populated once the component is rendered and typically, you will need to evaluate the Active value before that.
For fast searching elements by Selenium, I think it must be a simple way to set some attributes to html-elements, for example: transform React Component Key to data-attribute (if it is possible).
Of course I can writing id or data-attributes to my span, div and whatever in my components, but I can't do it with components of 3d-party libraries - this components may haven't props like "id", and I will have to wrap this components and then find they by tag or class...
Or maybe is plugin for webpack to set data-attributes to elements with component's names.
However, how you find elements in your react app render?
I think it's not a good idea find elements by class or tags
key transform like this:
<MyComponent key="SuperComponent" />
...
<div data-attr="SuperComponent">...</div>
or autoset attributes of component name like this:
<MySuperComponent />
...
<div data-attr="MySuperComponent">...</div>
From "Test Automation through Selenium" perspective it hardly matters if the HTML consists of id or data-attributes. While working with Selenium tests are written with the help of any effective <tag> and the associated attributes. However there is a preferred list of Locator Strategies as follows:
How to find elements in react app render?
The AUT (Application Under Test) being ReactJS based of-coarse the element will be having dynamic attributes. Locator Strategies can also be dynamic. You can find an example usage of Dynamic Locator Strategies in the discussion How to locate a button with a dynamicID
Finally, while Test Automation the fast moving WebDriver instance will be needed to be synchronized with the lagging browser. You can find a relevant discussion in Do we have any generic funtion to check if page has completely loaded in Selenium
I cannot use dom-bind template (for a set of reasons defined by where I use polymer) so I had to create element <global-scope> and put all other elements inside its light DOM. But I really lack of binding:
For instance I have:
<global-scope>
<data-provider data="{{datasource}}"></data-provider>
<data-consumer data={{datasource}}></data-consumer>
</global-scope>`
Neither can I use template dom-repeat in light-dom either (because of absence of bindings).
Is there a comprehensive way to compensate bindings, that would be natural for end-user (like as if I was using dom-bind)?
No, dom-bind was built exactly for that purpose. If you can't use dom-bind and not put your elements into the shadow-DOM or shady DOM then there is no way to use binding.
In netbeans (7.1.2) when adding a custom attribute to an HTML element, for example data-dismiss="modal I get a warning 'data-dismiss not allowed on element...'. Is it possible to add custom HTML attributes to Netbeans, making it aware of these attributes and not give a warning?
I've looked thoroughly through all menu options and configuration. I would expect something like 'add attribute to dictionary'
Is it possible to change the template used by MonoDevelop when you right click a field in C# select Refactor -> Encapsulate Field?
I would like to change the default code that is inserted when this option is selected.
It's not a template, it's a method that constructs a property to match your code formatting settings.
What do you want to change? If it's something that should be influenced by code formatting settings, please file an enhancement bug.