模板语法

最新推荐文章于 2024-07-12 09:36:48 发布

静静的躺平

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量75

点赞数

分类专栏： JavaScrpt css 文章标签： javascript css

本文链接：https://blog.csdn.net/weixin_39578505/article/details/122041128

版权

JavaScrpt 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <script type="text/javascript">
        customElements.define('person-details',
        class extends HTMLElement {
          constructor() {
            super();
        
            const template = document.getElementById('person-template');
            console.log(template)
            const templateContent = template.content;
        
            const shadowRoot = this.attachShadow({mode: 'open'});
        
            const style = document.createElement('style');
            style.textContent = `
              div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }
              h2 { margin: 0 0 10px; }
              ul { margin: 0; }
              p { margin: 10px 0; }
              ::slotted(*) { color: gray; font-family: sans-serif; }
            `;
        
            shadowRoot.appendChild(style);
            shadowRoot.appendChild(templateContent.cloneNode(true));
        }
        });
        </script>
</head>
<body>
    <template id="person-template">
        <div>
            <h2>Personal ID Card</h2>
                        
            <slot name="person-name">NAME MISSING</slot>
            <ul>
              <li><slot name="person-age">AGE MISSING</slot></li>
              <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
            </ul>
          </div>
        </div>
    </template>

    <person-details>
        <p slot="person-name">Morgan Stanley</p>
        <span slot="person-age">36</span>
        <span slot="person-occupation">Accountant</span>
      </person-details>
  
      <person-details>
        <p slot="person-name">Dr. Shazaam</p>
        <span slot="person-age">Immortal</span>
        <span slot="person-occupation">Superhero</span>
      </person-details>
  
      <person-details>
        <p slot="person-name">Boris</p>
        <span slot="age">27</span>
        <span slot="i-am-awesome">Time traveller</span>
      </person-details>
    
</body>

</html>

template 模板 slot 插槽通过插槽来实现模板语法的插入