Web Component 实战读书笔记

最新推荐文章于 2023-03-24 10:53:33 发布

weixin_33849215

最新推荐文章于 2023-03-24 10:53:33 发布

阅读量117

点赞数

文章标签： python

原文链接：https://my.oschina.net/lilugirl2005/blog/646272

版权

2019独角兽企业重金招聘Python工程师标准>>>

第一章 Web Component简介

模版元素

检测是否支持模版特性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Component : template support</title>
</head>
<body>
  <h1 id="message"></h1>
  <script>
    var isTemplateSupported = function(){
      var template = document.createElement('template');
      return "content" in template;
    };
    var isSupported=isTemplateSupported(),
        message=document.getElementById("message");
    if(isSupported){
      message.innerHTML="Template element is supported by the browser.";
    } else{
      message.innerHTML="Template element is not supported by the browser.";
    }
  </script>
</body>
</html>

延迟加载的模版

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Component : A inert template content example.</title>
</head>
<body>
  <div id="message"></div>
  <template id="aTemplate">
    <img src="http://www.tutorialsavvy.com/wp-content/uploads/2014/11/ReactJS-830-8301-300x300.png"  id="profileImage">
    <script>
      alert("this is a script");
    </script>
  </template>

  <script>
     (function(){
       var imageElement=document.getElementById("profileImage"),
           messageElement=document.getElementById("message");
           messageElement.innerHTML="IMG element "+imageElement;
     })();
  </script>
</body>
</html>