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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="benkimpel" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/benkimpel/120/33366_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  benkimpel
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="tfwright" data-post="11" data-topic="61175">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/tfwright/48/20299_2.png" class="avatar"> tfwright:</div>
<blockquote>
<p>Maybe a naive question but why is mixing in React (or something lighter perhaps like Alpine or Vue) considered such an undesirable outcome?</p>
</blockquote>
</aside>
<p>It’s a fair question, but it probably has as many answers as there are developers. For me, specifically, my team is very comfortable with Elixir/Phoenix/LV/etc. and not with JS/React. I’m quite comfortable in both, but if we can stay in Phoenix I’d rather do so for the sake of the team, maintenance, build pipelines, testing, etc. I’m not a JS/React hater by any means, but I do prefer Phoenix LV.</p>
<aside class="quote no-group" data-username="tfwright" data-post="11" data-topic="61175">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/tfwright/48/20299_2.png" class="avatar"> tfwright:</div>
<blockquote>
<p>If the needs of an app are really that dynamic can LV ever really be a good fit?</p>
</blockquote>
</aside>
<p>I think it can. It’s pretty close already. we should try at least! ;^D</p>
<aside class="quote no-group" data-username="tfwright" data-post="11" data-topic="61175">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/tfwright/48/20299_2.png" class="avatar"> tfwright:</div>
<blockquote>
<p>At some point you are going to be maintaining such a complex model of your state on the FE it seems like a split app just makes more sense than trying to tie everything to the BE through a socket, no?</p>
</blockquote>
</aside>
<p>I think that might actually be more likely if we were to start doing one-offs in react. What’s up for discussion now is still almost entirely server-side state. WCs have some internal state, but it is generally exposed through attributes which should be perfect for LV.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315641" data-batch-url="/posts/batch_likers">
                        4
                      </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/improve-support-for-web-components-in-forms-with-element-adapters/61175/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-315641" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315641"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="315651" data-post-id="315651">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="benkimpel" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/benkimpel/120/33366_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  benkimpel
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks for the discussion, everyone.</p>
<p>Looking forward to seeing what the Phoenix team comes up with.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315651" data-batch-url="/posts/batch_likers">
                        3
                      </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/improve-support-for-web-components-in-forms-with-element-adapters/61175/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-315651" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315651"
                     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="315971" data-post-id="315971">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’m just playing around with shoelace and LV, and hit exactly the points you address here.</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/3/1/312be968cb18904ac74715ff40a8191e413f4967.png" data-download-href="https://forum.elixirforum.com/uploads/default/312be968cb18904ac74715ff40a8191e413f4967" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/3/1/312be968cb18904ac74715ff40a8191e413f4967_2_690x156.png" alt="image" data-base62-sha1="70ZtxS6GvBdvjrg2dw8majnnMV1" width="690" height="156" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/3/1/312be968cb18904ac74715ff40a8191e413f4967_2_690x156.png, https://forum.elixirforum.com/uploads/default/optimized/3X/3/1/312be968cb18904ac74715ff40a8191e413f4967_2_1035x234.png 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/3/1/312be968cb18904ac74715ff40a8191e413f4967_2_1380x312.png 2x" data-dominant-color="FAFAFA"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1406×318 16.7 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/c/1/c199de2f516d0bae39df6dba93fc9df31761b521.png" data-download-href="https://forum.elixirforum.com/uploads/default/c199de2f516d0bae39df6dba93fc9df31761b521" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/c/1/c199de2f516d0bae39df6dba93fc9df31761b521_2_690x129.png" alt="image" data-base62-sha1="rCFOmngkbznbtCR2RdXTmo4LtER" width="690" height="129" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/c/1/c199de2f516d0bae39df6dba93fc9df31761b521_2_690x129.png, https://forum.elixirforum.com/uploads/default/optimized/3X/c/1/c199de2f516d0bae39df6dba93fc9df31761b521_2_1035x193.png 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/c/1/c199de2f516d0bae39df6dba93fc9df31761b521_2_1380x258.png 2x" data-dominant-color="EBEEF2"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1402×264 15.2 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p>So thanks for the pointer, works like a charm now!</p>
<p>What’s going on with the attributes I understood, but did not know how to address<br>
correctly, I’ll try out your solution. Question about <code>&lt;sl-dialog&gt;</code> (and other stuff that <code>@open</code>s) - how do you <code>open()</code> on the client (an open thats not baked in like in <code>&lt;sl-details&gt;</code> but has to be wired)? Do you sth like the shoelace docs:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;script&gt;
  const dialog = document.querySelector('.dialog-overview');
  const openButton = dialog.nextElementSibling;
  openButton.addEventListener('click', () =&gt; dialog.show());
  ...
&lt;/script&gt;
</code></pre>
<p>Or do you always go over the LV-server?</p>
<p>Really looking forward to a solutions for forms, but I think its not super critical to just use tailwind-forms for now.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315971" data-batch-url="/posts/batch_likers">
                        1
                      </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/improve-support-for-web-components-in-forms-with-element-adapters/61175/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-315971" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315971"
                     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="316060" data-post-id="316060">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="benkimpel" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/benkimpel/120/33366_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  benkimpel
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="Sebb" data-post="14" data-topic="61175">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sebb/48/21818_2.png" class="avatar"> Sebb:</div>
<blockquote>
<p>Question about <code>&lt;sl-dialog&gt;</code> (and other stuff that <code>@open</code>s) - how do you <code>open()</code> on the client (an open thats not baked in like in <code>&lt;sl-details&gt;</code> but has to be wired)? Do you sth like the shoelace docs</p>
</blockquote>
</aside>
<p>We were doing it over the server, so if it was triggered by user interaction there would be a <code>phx-click={JS.set_attribute({"open", true}, to: "some_selector")}</code>. There’s an important trick with the close, though. You’ll need to listen for <code>sl-after-hide</code> and then trigger a <code>JS.remove_attribute("open")</code> to “tell phoenix” about it. Otherwise, LV will pop it open again on re-render.</p>
<p>If you check out the example wrapper for <code>sl-dialog</code> above we were using attributes like <code>sl-show</code>, <code>sl-after-show</code>, and so on. Those represent Shoelace <em>events</em>, but they aren’t part of Shoelace as attributes. Those <code>sl-*</code> attributes were how we were keeping it phoenix-like and getting to use LV js. In <code>app.js</code> there were listeners that would basically call <code>execJS</code> on the corresponding attribute when Shoelace fired one of the events. And you can see that we wrapped the <code>sl-after-close</code> and <code>sl-after-show</code> to automatically trigger corresponding attribute operations through LV (purely so LV would know about them.)</p>
<pre data-code-wrap="js"><code class="lang-js">// WARNING: Lazy example. there are more checks and stuff and you wouldn't 
// want to type this out for every single event.
window.addEventListener("sl-after-show", (evt) =&gt; {
  if (evt.target.matches("[sl-after-show]") {
    liveSocket.execJS(evt.target, evt.target.getAttribute("sl-after-show"));
  }
};
</code></pre>
<p>Hope that helps!!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="316060" data-batch-url="/posts/batch_likers">
                        1
                      </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/improve-support-for-web-components-in-forms-with-element-adapters/61175/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-316060" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="316060"
                     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 #14"></div>
  </section>
</div>
    <div class="postbit" id="316072" data-post-id="316072">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<blockquote>
<p>Hope that helps!!</p>
</blockquote>
<p>it does. And also answers the next question I had (how to wire <code>JS{}</code> in the attribs to the actual events! Great I’ll try it out. Is it OK if I open-source the solution? (nothing fancy just for people to have a starting point)</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="316072" 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/improve-support-for-web-components-in-forms-with-element-adapters/61175/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-316072" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="316072"
                     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 #15"></div>
  </section>
</div>
    <div class="postbit" id="316073" data-post-id="316073">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="benkimpel" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/benkimpel/120/33366_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  benkimpel
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="Sebb" data-post="16" data-topic="61175">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sebb/48/21818_2.png" class="avatar"> Sebb:</div>
<blockquote>
<p>it does. And also answers the next question I had (how to wire <code>JS{}</code> in the attribs to the actual events! Great I’ll try it out. Is it OK if I open-source the solution? (nothing fancy just for people to have a starting point)</p>
</blockquote>
</aside>
<p>Go for it!</p>
<p>Name proposal: Shoelive</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="316073" 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/improve-support-for-web-components-in-forms-with-element-adapters/61175/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-316073" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="316073"
                     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 #16"></div>
  </section>
</div>
    <div class="postbit" id="316074" data-post-id="316074">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I wonder why it is necessary to tell LV that <code>@open</code> is set <strong>again</strong> (with reacting to <code>sl-after-show</code>) if you set it with <code>JS.set_attr</code> in the first place.</p>
<p>Makes sense for hard-wired open/close like in <code>sl-detail</code>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="316074" 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/improve-support-for-web-components-in-forms-with-element-adapters/61175/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-316074" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="316074"
                     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 #17"></div>
  </section>
</div>
    <div class="postbit" id="316075" data-post-id="316075">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="benkimpel" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/benkimpel/120/33366_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  benkimpel
                      <span class="op-star" title="Thread Starter">
                        <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                      </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group quote-modified" data-username="Sebb" data-post="18" data-topic="61175" data-full="true">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sebb/48/21818_2.png" class="avatar"> Sebb:</div>
<blockquote>
<p>I wonder why it is necessary to tell LV that <code>@open</code> is set <strong>again</strong> (with reacting <code>sl-after-show</code>) if you set it with <code>JS.set_attr</code> in the first place.</p>
<p>Makes sense for hard-wired open/close like in <code>sl-detail</code>.</p>
</blockquote>
</aside>
<p>Hm. Good point. That one may not have been strictly necessary.</p>
<p>One other gotcha…</p>
<p>The tailwind forms plugin seems to interfere with Shoelace when used with its global strategy. We had to switch it to the class strategy which wasn’t a big deal considering we were planning to use Shoelace forms.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="316075" 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/improve-support-for-web-components-in-forms-with-element-adapters/61175/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-316075" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="316075"
                     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 #18"></div>
  </section>
</div>
    <div class="postbit" id="316076" data-post-id="316076">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Always updating the server on-event will make it work with hard-wired components and allow using JS on the client. So I think its just easier to always do it.</p>
<p>tailwind-forms does not play nice some times, I’m used to that.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="316076" 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/improve-support-for-web-components-in-forms-with-element-adapters/61175/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-316076" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="316076"
                     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 #19"></div>
  </section>
</div>
    <div class="postbit" id="317586" data-post-id="317586">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Has anyone used fast-components?</p>
<p>It’s from Microsoft and seems to be the base for a number of styled component libraries to build off of.</p>
<p>It also has really good support for Blazor, which if I remember correctly, is a sort of spiritual equivalent to liveview in the .NET works.</p>
<p>In essence, I guess if not directly support for them, maybe just some documentation around them? “Here’s a very popular web component or an example and here is how we would support it and some of the drawbacks you might encounter if you try and also do this with some random web component”.</p>
<p>Of course, if the answer is “sounds great! PR’s welcome” that’s perfectly acceptable <img src="https://forum.elixirforum.com/images/emoji/apple/grinning_face_with_smiling_eyes.png?v=15" title=":grinning_face_with_smiling_eyes:" class="emoji" alt=":grinning_face_with_smiling_eyes:" loading="lazy" width="20" height="20"></p>
<p>I know morphdom and Shadow DOM based libraries are always going to be at odds unless accounted for, but I’d really love to see a mechanism or anointed path or something for how best to integrate them. I know that has been my hardest selling point to management that thinks JavaScript should enter our backend stack again, which I’ve been trying to avoid like the plague for a while, and am in the process of losing</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="317586" 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/improve-support-for-web-components-in-forms-with-element-adapters/61175/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-317586" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="317586"
                     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 #20"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/61175/load_more?page=3">Load more posts</a>
</div></template></turbo-stream>