I am trying to create a custom element that extends a SVGGlement. Here is the JSBin link to the code: http://jsbin.com/kovumoloda/2/edit?html,console,output
When I run the code, ready() isn't called and so aren't the contents of the Shadow DOM rendered.
I tried the same example without Polymer and it worked. Here is the JS Bin link http://jsbin.com/vihosojofi/1/edit?html,console,output
Is there anything I need to do differently to make this thing work with Polymer ?
Thanks !
Related
Is it possible to access a (Polymer) web component's dependency (also a component) which the only thing it does is load a js script, and override that with another (newer version in my case) script?
Concrete problem: I'm using various Polymer elements (say paper-dialog for example) which use neon-animation whose different animations all import the web-animations HTML which loads the script I want to override.
In other words I would like to perform something like what the /deep/ combinator does for CSS to penetrate into this specific HTML 'component' and add a newer version of the web-animations-next-lite.min.js script.
As for the why: the idea is to use a Chrome extension to perform this since remote update is not an option (internet connectivity limitations). I need to do this since with Chrome v54 our app "broke" (since we use an older web-animations version) by fixing the WebAnimations API so these errors broke animations and with that functionality (popups not appearing).
I already tried injecting the newer version script in my main HTML body with Chrome extension's content script but didn't have any luck there..
Thanks in advance for any ideas!
I know its a bit of a hack, but can't you just put your own version of the web-animations script in bower_components. The problem with trying to alter the polymer element in place is that it will have already loaded the script before you can get at it.
Listen to the load event on you HTML Imports <link>, then add a <script> element with the right src attribute.
It's this last downloaded (and parsed) script that will be taken in account.
<script>
function loaded() {
//file.html loaded
document.write( '<script src="new-file.js"></script>' )
}
</script>
<link rel=import href="file.html" onload="loaded()">
I am trying to render SVG graphics in run-time with no success. Only works if i put the SVG code inside the component's template.
I have tried it using the ComponentFactoryResolver and the ViewContainerRef's method createComponent. After that, the Renderer class (i'm trying to not use the nativeElement due the recommendations from Angular team), adding the namespace before the tagname: <svg:rect> and the selector property selector: ':svg:g[svg-box]'...
I am using Angular 2.0.0-rc.5. You can check it here https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview
In both cases the generated HTML code is correct but it doesn't render anything.
Any ideas?
Thank you.
Finally i got it!!
Using the Renderer class, when we create SVG elements we have to add the following before the element's tag: :svg:tag. In my case:
this.SVGRenderer.createElement(this.parent.nativeElement, ":svg:rect");
You can check it in this plunker's version 3: https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview
Now i'm trying to do the same using the ComponentFactoryResolver and the ViewContainerRef's method createComponent approach.
I got in trouble during developing react. I use
<img src="example.svg">
Or using module 'react-inlinesvg' to embed the svg
<Isvg src="example.svg" wrapper={React.DOM.div}>
i want to manipulate the<g>node of the svg file directly in react, add and remove class(ps: it's quite easy in JQuery). I tried to get the ref of the element but failed. what should i do?
There are 2 options:
Use some kind of query selectors;
User react for writing SVG;
I would recommend you using 2nd approach. If you want to manipulate your own SVG, you can just write them in React as a component and work as you work with other React components.
Here you can see a list of supported elements in React.
I don't know how to insert Polymer tags and UI components to Jade file, how to render it, or how to add the necessary script on the site. Can you help me with that?
Load up webcomponents polyfills
script(src="bower_components/webcomponentsjs/webcomponents.js")
Import Polymer and the element you want to use.
link(rel="import" href="../bower_components/polymer/polymer.html")
link(rel="import" href="bower_components/paper-button/paper-button.html")
Then create instances of it in your jade template.
paper-button() flat button
paper-button(raised) raised button
paper-button(noink) No ripple effect
I'm trying to use an SVG file with symbols, but it doesn't work inside a polymer element.
This is the code I use:
<svg class="icon-home"><use xlink:href="/images/icons.svg#icon-home"></use></svg>
It works perfectly fine in my index.html but just doesn't display the icon when used inside the polymer template.
If I take the contents of /images/icons.svg and put it directly in the polymer element it works. (I'm sure that the path is correct though)
Any idea on what could be the problem?
As a workaround I just created a <svg-icon> polymer element, that just inlines the contents of the .svg file. It works but it seems to me that it's more a workaround than a solution.