<ons-modal>のid指定時の挙動について

###分からないこと
OnsenUI V2で提供される<ons-modal>にid属性を与えると、以下のコードのようにgetElementById()を使用せず、id名の指定だけでDOM操作が可能になったのだがこれが仕様なのかバグなのかが分からない。

###コード

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    ons.ready(function() {
17      console.log("Onsen UI is ready!");
18    });
19  </script>
20</head>
21<body>
22    <ons-modal id="myModal">
23        表示されてる？！
24    </ons-modal>
25    <ons-page>
26        <ons-toolbar>
27            <div class="center">modal</div>
28        </ons-toolbar>
29    <div>hide modal</div>
30    </ons-page>
31    <script>
32        (function(){
33            document.addEventListener("init", function(){
34                myModal.show();
35            })
36        }())
37    </script>
38</body>
39</html>
40

###他に試したこと
<ons-button>タグと<ons-navigator>タグで同じ挙動が確認できた。

行動規範の内容に同意します

回答1件

ベストアンサー

ons-navigatorでの報告はteratailの別のQAにて見たことがあります。
公式にはそのような仕様があるとは紹介されていませんね。AngularJSをフレームワークとして用いた場合はvar要素で同じようなことができますが、AngularJS以外ではid要素でできるようになっているとはwebリファレンスに記載されていません。

今後サポートされるのか含め、気になるのであればmonacaサポートに問い合わせるかGitHubのOnsenUIにissueとして投稿するのが良いかもしれません。
個人的にはたとえ動くとしてもリファレンスに載っていない機能は利用しないつもりです。

投稿2017/04/14 08:00

編集2017/04/14 08:03