i18n-behavior

<html lang="en" preferred="" locales-path="locales"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <script type="module"> import './edge-case-test-imports.js'; </script> <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>  <script src="../../../wct-browser-legacy/browser.js"></script> <script type="module" src="./edge-case-test-imports.js"></script> <style> .test-container.running-test { display: block; } .test-container:not(.running-test) { display: none; } </style> </head> <body> <h2 id="test-name"></h2> <test-fixture class="test-container" id="empty-element-fixture"> <template> <empty-element></empty-element> </template> </test-fixture> <test-fixture class="test-container" id="bound-empty-element-fixture"> <template is="dom-template"> <empty-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}"></empty-element> </template> </test-fixture> <test-fixture class="test-container" id="no-template-element-fixture"> <template> <no-template-element></no-template-element> </template> </test-fixture> <test-fixture class="test-container" id="complex-compound-binding-element-fixture"> <template is="dom-template"> <complex-compound-binding-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}"></complex-compound-binding-element> </template> </test-fixture> <test-fixture class="test-container" id="advanced-binding-element-fixture"> <template is="dom-template"> <advanced-binding-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}" status="{{status}}" value="{{value}}" parameter="{{parameter}}"></advanced-binding-element> </template> </test-fixture> <div class="test-container"> <template id="edge-case-dom-bind" is="i18n-dom-bind" basepath="/" localizable-text="embedded"><i18n-format lang="{{effectiveLang}}"><span>{{text.text.0}}</span><span slot="1">{{text.name}}</span></i18n-format><i18n-number lang="{{effectiveLang}}">{{text.i18n-number_1}}</i18n-number> <i18n-format lang="{{effectiveLang}}"> <json-data>{{serialize(text.format)}}</json-data> <i18n-number offset="" slot="1" lang="{{effectiveLang}}">{{text.i18n-format_2.1}}</i18n-number> </i18n-format> <i18n-format lang="{{effectiveLang}}"> <span>{{text.i18n-format_3.0}}</span> <br slot="1"> </i18n-format> <span>{{tr('key')}}</span> <span>{{tr('key',text.table)}}</span> <span>{{tr('key','string')}}</span> <input placeholder="{ invalid: json }"> <p><i18n-format lang="{{effectiveLang}}"><span>{{text.p_8.0}}</span><br slot="1"><span slot="2"></span><span slot="3"> </span></i18n-format></p> <p><i18n-format lang="{{effectiveLang}}"><span>{{text.p_9.0}}</span><template is="dom-repeat" items="[0,1]"><br slot="1"></template></i18n-format></p>{{text.text_10}}<br><span></span> <span> </span>{{text.text_14}}<template id="localizable-text"> <json-data> { "meta": {}, "model": {}, "text": [ " name = {1} ", "{{text.name}}" ], "i18n-number_1": "1", "i18n-format_2": [ "{{text.format}}", "1" ], "i18n-format_3": [ "format", "" ], "p_8": [ "hello {1}{2} {3} world", "<br>", "<span>", "<span>" ], "p_9": [ "hello{1}world", "<br>" ], "text_10": " hello ", "text_14": " world " } </json-data> </template> </template> <template> <json-data text-id="target" data="{}"></json-data> <json-data id="func">{ "func": or }</json-data> <json-data text-id="format">{ "other": "other format" }</json-data> <json-data text-id="table">{ "message-id": "message 1" }</json-data> <span text-id="name">John</span> </template> </div> <i18n-preference></i18n-preference> </body></html>