<google-chart> 在 <template is="dom-bind"> 内不起作用
<google-chart> does not work inside <template is="dom-bind">
元素在 内部时对我不起作用（不显示任何内容）（ 在主文档或其他元素的<模板>)。另一方面，当我把它放在主文档的 外面时它起作用了。
https://jsbin.com/fivamu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org">
<script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/google-web-components/google-web-components.html">
</head>
<body>
<template is="dom-bind">
<h2>Doesn't work here:</h2>
<google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</template>
<h2>Works here:</h2>
<google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</body>
</html>
这会起作用（在您的 jsbin 中测试）：
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org">
<script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/google-web-components/google-web-components.html">
</head>
<body>
<template id="t" is="dom-bind">
<h2>Doesn't work here:</h2>
<google-chart id='map'></google-chart>
</template>
<h2>Works here:</h2>
<google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</body>
<script>
var t = document.querySelector('#t');
// The dom-change event signifies when the template has stamped its DOM.
t.addEventListener('dom-change', function() {
// auto-binding template is ready.
console.log('ready');
var map = document.querySelector('#map');
map.setAttribute('type', 'geo');
map.setAttribute('data', '[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]');
});
</script>
</html>
google-chart element relies on async calls to Google APIs. If these calls do not resolve before the template has stamped its DOM, the google-chart is incomplete. Adding the data field after the auto-binding template is ready 将模拟模板外的行为。
尝试在方括号之间添加空格：
data='[ ["Country", "Popularity"],["Germany", 200],["France", 600],["RU", 700] ]'
https://jsbin.com/fivamu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org">
<script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/google-web-components/google-web-components.html">
</head>
<body>
<template is="dom-bind">
<h2>Doesn't work here:</h2>
<google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</template>
<h2>Works here:</h2>
<google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</body>
</html>
这会起作用（在您的 jsbin 中测试）：
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org">
<script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/google-web-components/google-web-components.html">
</head>
<body>
<template id="t" is="dom-bind">
<h2>Doesn't work here:</h2>
<google-chart id='map'></google-chart>
</template>
<h2>Works here:</h2>
<google-chart type='geo' data='[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]'></google-chart>
</body>
<script>
var t = document.querySelector('#t');
// The dom-change event signifies when the template has stamped its DOM.
t.addEventListener('dom-change', function() {
// auto-binding template is ready.
console.log('ready');
var map = document.querySelector('#map');
map.setAttribute('type', 'geo');
map.setAttribute('data', '[["Country", "Popularity"],["Germany", 200],["United States", 300],["Brazil", 400],["Canada", 500],["France", 600],["RU", 700]]');
});
</script>
</html>
google-chart element relies on async calls to Google APIs. If these calls do not resolve before the template has stamped its DOM, the google-chart is incomplete. Adding the data field after the auto-binding template is ready 将模拟模板外的行为。
尝试在方括号之间添加空格：
data='[ ["Country", "Popularity"],["Germany", 200],["France", 600],["RU", 700] ]'