The rect does not come out when using cdn

[YU HSIANG]

I try to use cdn ,but I found that it can't working at custom.
(rect just show first one , and primaryColor 、secondaryColor also not working)

<script src="https://cdn.jsdelivr.net/npm/vue-content-loader@0.2.3/dist/vue-content-loader.min.js"></script>

code:

<div id="app">
<template>
              <content-loader  primaryColor="#fff" secondaryColor="#000">
                <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
                <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
                <rect x="0" y="80" rx="3" ry="3" width="350" height="6.4" />
                <rect x="0" y="100" rx="3" ry="3" width="380" height="6.4" />
                <rect x="0" y="120" rx="3" ry="3" width="201" height="6.4" />
                <circle cx="30" cy="30" r="30" />
              </content-loader>
            </template>
</div>
<script>
  new Vue({
    el: '#app',
    data () {
      return {
        list: [],
        tags:[]
      }
    },
    components: { 
        'content-loader': window.contentLoaders.ContentLoader
      }
  })
</script>

but the result ：
(rect just show first one , and primaryColor 、secondaryColor also not working)

[Benoît Burgener]

@unromanticman You seem to be mixing inline templates and single file components syntax. When writing Vue templates in raw HTML, you need to comply to the HTML standard. Here are the two mistakes you made:

• HTML attributes must be in kebab-case, not camelCase. primaryColor 👉 primary-color
• rect and circle elements should not be self closing. <circle cx="30" cy="30" r="30" /> 👉 <circle cx="30" cy="30" r="30"></circle>

Here is a working example: https://jsfiddle.net/owkgbaL6/1/