<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script
      type="text/javascript"
      src="https://unpkg.com/riot@4/riot+compiler.min.js"
    ></script>
    <script src="lib/script.js"></script>
  </head>

  <body>
    <app></app>
    <sub></sub>
    <!-- コンポーネント名は大文字でもよい  -->
    <!-- <App></App> -->

    <script src="app.riot.html" type="riot"></script>
    <script src="sub.riot.html" type="riot"></script>
    <script>
      riot.compile().then(() => {
        riot.mount('app, sub', {
          messageToApp: 'Hello App Component!',
          messageToSub: 'Hello Sub Component!',
        });
      });
    </script>
  </body>
</html>

app .app-header {
  padding: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid #999;
}
app .logo {
  height: 36px;
  margin-bottom: 5px;
}
// Add your code here


<app>
  <div class="app-header">
    <img src="https://riot.js.org/img/logo/riot-logo.svg" class="logo">
  </div>
  <h1>{ props.messageToSub }</h1>
</app>
<sub>
  <h2>{ props.messageToApp }</h1>
</sub>