Geek Answers Handbook

Custom HTML Element Attribute Not Displayed - Web Components

I am learning custom HTML elements for web components, and I am having a problem adding custom attributes to my custom elements: any value set in the markup never runs. For a simple element like this that should display the text specified in the "flagtext" attribute, it always shows the default value.

<test-flag flagtext="my text"></test-flag>

Full JSBin sample here .

JSBin uses the Polymer library (since this is the only thing I can do there). I use webcomponents.js, usually the same result. Both Chrome 49 and Firefox 45 give the same result. There are no errors in the console or debugger.

Each sample I found on the Internet has similar code, but I tried different versions and always refuse to update. I even copied some samples to JSBin and they do not work either.

What could be wrong? I understand that this is an experimental technology, but the sequence with which it does not work is still surprising. Did this standard refuse? (I see that the last draft of custom elements in April 2016 by the W3C completely changed its approach.)

When I define the attributeChangedCallback function, it fails. I can easily change the property through Javascript, this is not a problem.

But why can't I indicate the property in the markup as I should?

Edit - Full Code

Note that you will need to put them in separate files for importing HTML and you will need the library "webcomponents-lite.js".

HTML

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        test-flag
        {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
  <script src="lib/webcomponents-lite.min.js"></script>
  <link rel="import" href="test-flag.html">

  Here is the custom test-flag component: 
  <p>      
  <test-flag flagtext="my text"></test-flag>  
</body>
</html>

: test-flag.html

<template>

    <style>
    </style>

    Content:
    <div id="testflagID">
    </div>

</template>


<script>    

    (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);

        };

    })();

</script>
+4
1

, .

HTML:

<test-flag flagtext="my text"></test-flag>

... term flagtext - HTML ( ).

JavaScript:

Object.defineProperty(customPrototype, 'flagtext', {value: '(default)', writable: true})

... term flagtext - JavaScript ( ).

( ). ( ). , .

, createdCallback() :

this.flagtext = this.getAttribute( 'flagtext' ) || '(default)'

:

document.registerElement( 'test-flag' , {
  prototype: Object.create( HTMLElement.prototype, {
    flagtext: {
      value: '(default)',
      writable: true
    },
    createdCallback: {
      value: function() 
      {
        this.flagtext = this.getAttribute( 'flagtext' ) || this.flagtext
        this.innerHTML = 'flagtext=' + this.flagtext
      }
    },
  } )
} )
<test-flag flagtext='new content'>Hello</test-flag>
Hide result

: attributeChangedCallback() ( ).

+7

More articles:


All Articles