Web要素のカスタムHTML要素を調べていて、カスタム要素にカスタム属性を追加する際に問題が発生しています。 "flagtext"属性で指定されたテキストを表示するこのような単純な要素については、常にデフォルト値が表示されます。カスタムHTML要素の属性が表示されない - Web-Components
<test-flag flagtext="my text"></test-flag>
完全なJSBinサンプルはhereです。
JSBinはPolymerライブラリを使用しています（これが私がそこに引き込める唯一のものです）。私は一般的に同じ結果をwebcomponents.jsを使用しています。 Chrome 49とFirefox 45の両方で同じ結果が得られます。コンソールまたはデバッガにエラーが表示されません。
ウェブ上にあるすべてのサンプルには同様のコードがありますが、さまざまなバージョンを試しましたが、常に更新を拒否しています。 JSBinにいくつかのサンプルをコピーしても、どちらも機能しません。
何が間違っている可能性がありますか？私はそれが実験的な技術だと理解していますが、これがうまくいかないという一貫性は依然として驚くべきことです。この基準は放棄されていますか？ （私は、カスタム要素の最新の2016年4月のW3Cドラフトが、そのアプローチを完全に変更したことを知っています。）
"attributeChangedCallback"関数を定義すると起動しません。 Javascriptでプロパティを簡単に変更できますが、これは問題ではありません。
しかし、私が想定しているようにマークアップでプロパティを指定できないのはなぜですか？
編集 - 完全なコードあなたがHTMLのインポート用に別々のファイルにこれらを配置する必要があり、そしてあなたは「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>
ファイル：テスト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>
WebコンポーネントはChrome専用です。 ChromeとOpera以外のすべてのブラウザでは動作しません（オペラはクロムと同じエンジンを使用しています）。 http://caniuse.com/#search=componentsこれを使用しないでください –
（a）これは正しくありません - webcomponents.js polyfillは多くのブラウザで機能を有効にしています。 Chromeで作業している場合は – nepdev
'機能を有効にする 'が間違っています。動作をエミュレートしますが、Webコンポーネントではありません。しかし、私は自分の仕事からjsbin.comにアクセスすることはできません。なぜなら、質問の中でコード**を共有するほうがいいからです（** [ヘルプセンター]（http://stackoverflow.com/help）） ）。 –