自定义HTML元素属性未显示:Web-组件,怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (136)

我正在探索web组件自定义HTML元素,我遇到了向自定义元素添加自定义属性的问题:我在标记中设置的任何值都不会被遵守。对于这样一个简单的元素,它应该显示在“标记文本”属性中提供的文本,它总是显示默认值。

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

我在网上找到的每一个样本都有相似的代码,但是我尝试了不同的版本,它总是拒绝更新。我甚至将一些示例复制到JSBin中,它们也不起作用。

有什么问题吗?我知道这是一种实验性的技术,但它的一致性仍然令人惊讶。这个标准被放弃了吗?(我看到最新的2016年4月W3C定制元素草案已经完全改变了它的方法。)

当我定义“Attribute teChangedCallback”函数时,它不会触发。我可以通过Javascript轻松地修改属性,这不是问题。

但是,为什么我不能指定标记中的属性,就像我应该指定的那样?

主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-char.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>
提问于
用户回答回答于

有两个概念不是自动连接在一起的。

在HTML代码中:

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

在JavaScript代码中:

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

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>

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励