<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="312851" data-post-id="312851">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="bob" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bob/120/19663_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  bob
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Happy to help. Full disclaimer: what was shown off at ElixirConf was a first working prototype (so I’m obviously completely embarrassed about a number of make-it-work decisions in the code shown that I later refactored into a much more elegant and dynamic system <img src="https://forum.elixirforum.com/images/emoji/apple/grimacing.png?v=15" title=":grimacing:" class="emoji" alt=":grimacing:" loading="lazy" width="20" height="20">). Feel free to email/message me if questions arise—I’d be happy to talk about things learned and improved along the journey.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="312851" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/running-liveview-inside-a-web-component-with-shadow-dom/60595/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-312851" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="312851"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="312870" data-post-id="312870">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="superchris" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/superchris/120/23484_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  superchris
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi, author of LiveState here. Fun fact, LiveState only exists because I was unsuccessful doing what you are trying to do <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"> I ended up diving deep into the bowels of live_view both client and server. It’s been a couple years so I no longer have all the details in my memory banks, but I ended up having to make significant hacks to both. At the point where I ended up needing my own type of templates (heex was doing something I couldn’t get around as I recall) I gave up.</p>
<p>OTOH, I and several others have done projects to build web components for customers with LiveState, this is what’s it’s designed for. If you go this route and need any help (or not!) we’d love to hear about it. Good luck!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="312870" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/running-liveview-inside-a-web-component-with-shadow-dom/60595/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-312870" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="312870"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="314231" data-post-id="314231">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="sezaru" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sezaru/120/36113_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  sezaru
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey <a class="mention" href="/u/bob" rel="nofollow">@bob</a> would you mind sharing what changes you needed to do to make CSP work in our case?</p>
<p>I’m also trying to run a liveview page inside an iframe as you did for Payitoff, but I’m having problems to make it work well when injecting the iframe in another domain.</p>
<p>Also, another question, did you manage to make your solution work with Safari? Safari will block third party cookies inside an iframe, so to make it work you normally will need to totally remove the session cookie from liveview (you will need to remove the <code>:fetch_session</code> and <code>:protect_from_forgery</code> plugs for example) making it insecure.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="314231" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/running-liveview-inside-a-web-component-with-shadow-dom/60595/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-314231" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="314231"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="314273" data-post-id="314273">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="adw632" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  adw632
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="jfpedroza" data-post="10" data-topic="60595">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jfpedroza/48/32425_2.png" class="avatar"> jfpedroza:</div>
<blockquote>
<p>What you say about SSR, I’m not sure applies here, since the components would be embedded in third party pages. We don’t control where in the page the component will be.</p>
</blockquote>
</aside>
<p>Yes it would certainly be primarily for regular site use cases as the initial render is important for SSO.</p>
<p>However I can also see use cases that would allow the component author to ship a tiny shim component and dynamically load the content and the full component code on the first render. This would be a nice way to handle seamless server based upgrades.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="314273" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/running-liveview-inside-a-web-component-with-shadow-dom/60595/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-314273" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="314273"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>