Code Monkey home page Code Monkey logo

polymer-svg-template's Introduction

Polymer SVG Template poly-fill

When defining a custom element in Polymer, using any <template> element (dom-if/dom-repeat) in won't work in some browsers, load this shim before calling Polymer factory, shall make it work properly cross-browsers.

This shim should work with polymer 2.0 as well.

Usage

<link rel="import" href="../bower_components/polymer-svg-template/polymer-svg-template.html"/>
<dom-module id="my-svg-template">
    <template>
    	<svg>
    		<template is="dom-if" if="[[_condition]]">
    			...
    		</template>
    	</svg>
    </template>
</dom-module>
<script>
   //  Polyfill all <template> elements inside of any <svg> container within
   PolymerSvgTemplate('my-svg-template');
	Polymer({
		is: 'my-svg-template'
		...
	})
</script>

polymer-svg-template's People

Contributors

garryyao avatar christophe-g avatar

Stargazers

 avatar Johannes Brautzsch avatar

Watchers

James Cloos avatar  avatar Johannes Brautzsch avatar

Forkers

polymerel

polymer-svg-template's Issues

Uncaught TypeError: Cannot read property 'body' of undefined

Hi,

When using with Polymer 2, I get the following error :

Uncaught TypeError: Cannot read property 'body' of undefined
    at templateInSvg (polymer-svg-template.js:37)
    at dt-maps-svg-box.js:2

Here is my HTML and JS file :

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer-svg-template/polymer-svg-template.html" />

<dom-module id="dt-maps-svg-box">
  <template>
    <svg view-box="0 0 615 584">
      <template is="dom-repeat" items="[[areas]]" as="area">
        <path id="[[area.id]]" d$="[[area.svgPath]]" class$="[[_computeAreaClass(area.selected, area.disabled)]]"></path>
      </template>
    </svg>
  </template>
</dom-module>
<script src="dt-maps-svg-box.js"></script>
PolymerSvgTemplate('dt-maps-svg-box');
class DtMapsSvgBox extends DtToolsBehavior(Polymer.Element) {
  static get is() {
    return 'dt-maps-svg-box';
  }

  static get properties() {
    return {
      areas: {
        type: Array,
        value: [],
      },
    };
  }
}

customElements.define(DtMapsSvgBox.is, DtMapsSvgBox);

I had a quick look, and I'm not sure window.currentImport; on line 36 if of polymer-svg-template.js is still defined in Polymer 2. When I replace with document.currentScript.ownerDocument it works well on Chrome and Safari but still doesn't work in Firefox (the problem seems related to webcomponentsjs)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.