title: Custom HTML element attribute not showing - Web-Components
body: <p>I'm exploring web-components custom HTML elements, and I am running into a problem adding custom attributes to my custom elements: any value I set in the markup is never honored.
  For a simple element like this, which should show the text supplied in the "flagtext" attribute, it does always show the default value.</p>
  
  <pre><code>&lt;test-flag flagtext="my text"&gt;&lt;/test-flag&gt; 
  </code></pre>
  
  <p>Full JSBin sample is <a href="http://jsbin.com/vepizulefi/1/edit?html,js,output" rel="nofollow">here</a>.</p>
  
  <p>The JSBin uses the Polymer library (as this is the only thing I can pull in there). I am using webcomponents.js generally, same result. Both in Chrome 49 and in Firefox 45 gives same result. There is no error showing in the console or debugger.</p>
  
  <p>Every sample I find on the web has similar code but I tried various versions and it always refuses to update. I even copied a few samples into JSBin and they do not work either.</p>
  
  <p>What could be wrong? I understand it is experimental technology but the consistency with which this isn't working is still surprising. Has this standard been abandoned? (I see that the latest April 2016 W3C draft of custom elements has entirely changed its approach.)</p>
  
  <p>When I define "attributeChangedCallback" function, it does not fire.
  I can easily modify the property via Javascript, this is not a problem. </p>
  
  <p>But why can I not specify the property in markup, as I am supposed to?</p>
  
  <p><strong>Edit - full code</strong></p>
  
  <p>Note that you'll need to put these into separate files for the HTML import, and that you need the "webcomponents-lite.js" library. </p>
  
  <p><strong>Main HTML file</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;style&gt;
          test-flag
          {
              border: 1px solid blue;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script src="lib/webcomponents-lite.min.js"&gt;&lt;/script&gt;
    &lt;link rel="import" href="test-flag.html"&gt;
  
    Here is the custom test-flag component: 
    &lt;p&gt;      
    &lt;test-flag flagtext="my text"&gt;&lt;/test-flag&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>File: test-flag.html</strong></p>
  
  <pre><code>&lt;template&gt;
  
      &lt;style&gt;
      &lt;/style&gt;
  
      Content:
      &lt;div id="testflagID"&gt;
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  
  &lt;script&gt;    
  
      (function() {
  
          var _currentScript = (document._currentScript || document.currentScript);
          var importDoc = _currentScript.ownerDocument;
          var customPrototype = Object.create(HTMLElement.prototype);        
          Object.defineProperty(customPrototype, 'flagtext', {value: '(default)', writable: true});       
          document.registerElement('test-flag', {prototype: customPrototype});
  
  
          customPrototype.createdCallback = function() 
          {
              var template = importDoc.querySelector('template');
              var clone = document.importNode(template.content, true);
              var idx = clone.querySelector("#testflagID");
              idx.textContent = this.flagtext;
              var root = this;
              var createdElement = root.appendChild(clone);
  
          };
  
      })();
  
  &lt;/script&gt;
  </code></pre>