html Web制作者のためのCSS设计の教科书p198 Web组件

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Web制作者のためのCSS设计の教科书p198 Web组件相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>

    <my-alert></my-alert><!-- custom element -->

    <template id="my-alert-template">

      <style>
       .alert {
         position: relative;
         border-radius: 6px;
         border: 1px solid #ddd;
         background-color: #eee;
         padding: 0.6em 0.6em;
       }

       .alert__title,
       .alert__body > * {
         margin: 0;
         padding: 0;
       }

       .alert__title {
         font-weight: bold;
       }
      </style>

      <div class="alert">
        <p class="alert__title">Alert Title</p>
        <div class="alert__body">
          <p>Message</p>
        </div>
      </div>

    </template>

    <script>
     (function() {
       var element = Object.create(HTMLElement.prototype);

       // Run when custom elements created
       element.createdCallback = function() {
         var template = document.querySelector('#my-alert-template');
         var content = template.content;
         var shadowRoot = this.createShadowRoot();
         shadowRoot.appendChild(document.importNode(content, true));
       };

       // Register my-alert tag and inherit the object created above
       document.registerElement('my-alert', {
         prototype: element
       });

     })();
    </script>

  </body>
</html>

以上是关于html Web制作者のためのCSS设计の教科书p198 Web组件的主要内容，如果未能解决你的问题，请参考以下文章

ruby 検出のための指标E（s）を求めるスクリプト特特特特特特特））

css OOCSSのためのスタイルルール集。

markdown やる気を出すための10の方法

text NVIDIA GPUボードリスト（CUDA利用のため）#memo

html ページの迁移时にフェードアウト，フェードイン效果をだすためのjQuery的プラグイン

markdown GitPitchでコミットログをキレイにするための提示