Twitterのlitelementとvanillajsで埋め込む


私は仕事の観点からパレットの浄化のビットを必要としているので、私は私たちの問題のキューに掘り下げ、私が容易になると思ったものを見つけました
私が始めたとき、私は「HMM」のようでした.

この関数は

Twitterで働くことは、私がどのようにそれを作ったかについて示すためにビデオをするつもりであるということを埋め込みました.私はそれを0から終了する完全な終わりをすることを考えています思考における思考
午後14時43分- 2020年8月26日
1
1
ここでは、完全なビデオを通じて、以下のコードといくつかのものを投稿します

Twitterの会話 ビデオのリンク

  • NPM :
  • ソース:
  • iframeサンドボックス:
  • iframe怠惰な荷:https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
  • https://web.dev/iframe-lazy-loading/ バニラジャ


    ここでは、バニラバージョンのためのコードは
    class TwitterEmbed extends HTMLElement {
      static get tag() {
        return "twitter-embed";
      }
      /**
       * HTMLElement spec / class based architecture in general
       */
      constructor() {
        super();
        this.dataWidth = this.getAttribute("data-width")
          ? this.getAttribute("data-width")
          : "550px";
        this.dataTheme = this.getAttribute("data-theme")
          ? this.getAttribute("data-theme")
          : "light";
        this.tweet = this.getAttribute("tweet") ? this.getAttribute("tweet") : null;
        this.tweetId = this.getAttribute("tweet-id")
          ? this.getAttribute("tweet-id")
          : null;
        this.allowPopups = this.getAttribute("no-popups") ? "" : "allow-popups";
      }
      /**
       * HTMLElement spec
       */
      static get observedAttributes() {
        return ["tweet", "data-width", "data-theme", "tweet-id", "no-popups"];
      }
      /**
       * HTMLElement spec
       */
      attributeChangedCallback(attr, oldValue, newValue) {
        if (attr == "tweet" && newValue && newValue.includes("twitter.com")) {
          this.tweetId = newValue.split("/").pop();
        }
        if (attr == "no-popups") {
          this.allowPopups =
            newValue == "no-popups" ||
            newValue == "" ||
            !newValue ||
            newValue == null ||
            newValue == "null"
              ? ""
              : "allow-popups";
        }
        if (["no-popups", "tweet-id", "data-width", "data-theme"].includes(attr)) {
          this.innerHTML = this.html;
        }
      }
      get dataWidth() {
        return this.getAttribute("data-width");
      }
      set dataWidth(value) {
        if (value == null || !value) {
          this.removeAttribute("data-width");
        } else {
          this.setAttribute("data-width", value);
        }
      }
      get dataTheme() {
        return this.getAttribute("data-theme");
      }
      set dataTheme(value) {
        if (!value || !["dark", "light"].includes(value)) {
          this.dataTheme = "light";
        } else {
          this.setAttribute("data-theme", value);
        }
      }
      get tweetId() {
        return this.getAttribute("tweet-id");
      }
      set tweetId(value) {
        if (value == null) {
          this.removeAttribute("tweet-id");
        } else {
          this.setAttribute("tweet-id", value);
        }
      }
      get tweet() {
        return this.getAttribute("tweet");
      }
      set tweet(value) {
        if (value == null) {
          this.removeAttribute("tweet");
        } else {
          this.setAttribute("tweet", value);
        }
      }
      /**
       * my own convention, easy to remember
       */
      get html() {
        return `
        <div
          class="twitter-tweet twitter-tweet-rendered"
          style="display: flex; max-width: ${
            this.dataWidth
          }; width: 100%; margin-top: 10px; margin-bottom: 10px;">
          <iframe
            sandbox="allow-same-origin allow-scripts ${this.allowPopups}"
            scrolling="no"
            frameborder="0"
            loading="lazy"
            allowtransparency="true"
            allowfullscreen="true"
            style="position: static; visibility: visible; width: ${
              this.dataWidth
            }; height: 498px; display: block; flex-grow: 1;"
            title="Twitter Tweet"
            src="https://platform.twitter.com/embed/index.html?dnt=true&amp&amp;frame=false&amp;hideCard=false&amp;hideThread=false&amp;id=${
              this.tweetId
            }&amp;lang=en&amp;origin=http%3A%2F%2Flocalhost%3A8000%2Felements%2Ftwitter-embed%2Fdemo%2Findex.html&amp;theme=${
          this.dataTheme
        }&amp;widgetsVersion=223fc1c4%3A1596143124634&amp;width=${this.dataWidth}"
            data-tweet-id="${this.tweetId}">
          </iframe>
        </div>`;
      }
    }
    customElements.define(TwitterEmbed.tag, TwitterEmbed);
    export { TwitterEmbed };
    

    長所

  • 0の依存関係
  • プラットホームレベルコードだけ、すべての有効なコンベンション
  • は、理論的に永遠に、そして、どんなプラットホームででも24679182に働かなければなりません

    短所

  • verboseデータバインドを期待しているかどうかを調べる
  • 若干の奇妙なコンストラクタ物/デフォルト値スタッフ
  • 再貸し手は、重い手で
  • です

    litelement


    litelementが人気
    import { LitElement, html } from "lit-element/lit-element.js";
    class TwitterEmbedLit extends LitElement {
      static get tag() {
        return "twitter-embed-lit";
      }
      /**
       * HTMLElement spec
       */
      constructor() {
        super();
        this.dataWidth = "550px";
        this.dataTheme = "light";
        this.tweet = null;
        this.tweetId = null;
        this.allowPopups = "allow-popups";
      }
      /**
       * LitElement properties definition
       */
      static get properties() {
        return {
          tweet: {
            type: String
          },
          dataWidth: {
            type: String,
            attribute: "data-width"
          },
          dataTheme: {
            type: String,
            attribute: "data-theme"
          },
          tweetId: {
            type: String,
            attribute: "tweet-id"
          },
          noPopups: {
            type: Boolean,
            attribute: "no-popups"
          },
          allowPopups: {
            type: String
          }
        };
      }
      /**
       * LitElement equivalent of attributeChangedCallback
       */
      updated(changedProperties) {
        changedProperties.forEach((oldValue, propName) => {
          if (propName === "noPopups") {
            if (this[propName]) {
              this.allowPopups = "";
            } else {
              this.allowPopups = "allow-popups";
            }
          }
          if (
            propName === "tweet" &&
            this[propName] &&
            this[propName].includes("twitter.com")
          ) {
            this.tweetId = this[propName].split("/").pop();
          }
        });
      }
      /**
       * Popular convention / LitElement
       */
      render() {
        return html`
          <div
            class="twitter-tweet twitter-tweet-rendered"
            style="display: flex; max-width: ${this
              .dataWidth}; width: 100%; margin-top: 10px; margin-bottom: 10px;"
          >
            <iframe
              sandbox="allow-same-origin allow-scripts ${this.allowPopups}"
              scrolling="no"
              frameborder="0"
              loading="lazy"
              allowtransparency="true"
              allowfullscreen
              style="position: static; visibility: visible; width: ${this
                .dataWidth}; height: 498px; display: block; flex-grow: 1;"
              title="Twitter Tweet"
              src="https://platform.twitter.com/embed/index.html?dnt=true&amp;frame=false&amp;hideCard=false&amp;hideThread=false&amp;id=${this
                .tweetId}&amp;lang=en&amp;origin=http%3A%2F%2Flocalhost%3A8000%2Felements%2Ftwitter-embed%2Fdemo%2Findex.html&amp;theme=${this
                .dataTheme}&amp;widgetsVersion=223fc1c4%3A1596143124634&amp;width=${this
                .dataWidth}"
              data-tweet-id="${this.tweetId}"
            >
            </iframe>
          </div>
        `;
      }
    }
    
    customElements.define(TwitterEmbedLit.tag, TwitterEmbedLit);
    export { TwitterEmbedLit };
    

    短所

  • 1依存性
  • ライブラリの特定の慣例
  • 長所

  • 規則は、単純な
  • です
    HTML 5653に書き換える協定は、将来的にプラットホームレベルコードになるかもしれません
  • Tidyコード、書き込みにわずかに少なく、読みやすい
  • より高速な再レンダリングが可能であるが、この例では