Created
September 29, 2017 09:12
-
-
Save zevisert/77d8ee9d5ce5d11718f7174fc5ce89bc to your computer and use it in GitHub Desktop.
Demo of an instagram embed in Shadow DOM
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<title>Instagram in Polymer demo</title> | |
<!-- Import the webcomponents polyfill and Polymer --> | |
<base href="https://polygit.org/components/"> | |
<script src="webcomponentsjs/webcomponents-lite.js"></script> | |
<link rel="import" href="polymer/polymer-element.html"> | |
</head> | |
<!-- Define an empty custom component that behaves like a div, | |
it just renders its content, nothing else. Use this to test | |
accessing nested shadow DOM --> | |
<dom-module id="x-div"> | |
<template> | |
<div> | |
<slot></slot> | |
</div> | |
</template> | |
<script> | |
class xDiv extends Polymer.Element { | |
static get is() { return 'x-div'; } | |
static get properties() { return {}; } | |
} | |
window.customElements.define(xDiv.is, xDiv); | |
</script> | |
</dom-module> | |
<!-- Define another custom component which houses the embed.js embeddment method | |
right from the menu button on a post. --> | |
<dom-module id="x-instagram"> | |
<template> | |
<div> | |
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"><div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.5% 0; text-align:center; width:100%;"><div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div><p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BZhkPcQDtpC/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;"target="_blank">Photo by @ayoubarouk Taking the leap 🤸♂️ #WHPdynamic</a></p><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by Instagram (@instagram) on<time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-09-27T00:32:43+00:00">Sep 26, 2017 at 5:32pm PDT</time></p></div></blockquote> | |
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script> | |
</div> | |
</template> | |
<script> | |
class xInstagram extends Polymer.Element { | |
static get is() { return 'x-instagram'; } | |
static get properties() { return {}; } | |
} | |
window.customElements.define(xInstagram.is, xInstagram); | |
</script> | |
</dom-module> | |
<body> | |
<x-div> | |
<x-div> | |
<x-instagram></x-instagram> | |
</x-div> | |
</x-div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment