我们可以在常规的非 Blazor HTML 页面中将 Blazor 组件用作 Web 组件吗? [英] Can we consume a Blazor component as a Web Component within a regular non-Blazor HTML page?
问题描述
我们能否将 Blazor 组件呈现为独立的 DOM 片段，或者以其他方式将其作为标准 Web 组件使用在普通 HTML/JS 页面中?
从 Blazor 架构的角度来看，这可能是一个幼稚的问题.到目前为止，我还不是 Blazor 专家，但我认为它可以成为增量棕色地带"的有用技术.遗留网络应用程序的现代化.我很惊讶这似乎没有得到官方支持.
为了说明，考虑这个简单的 Web 组件示例，它呈现一个自定义元素
//定义一个自定义的web组件customElements.define("date-info", class DateInfo extends HTMLElement {构造函数(){极好的();//创建一个开放"(与封闭")shadow DOM，//即，外部 JavaScript 可以访问this.attachShadow({ mode: "open" });}异步 connectedCallback() {console.log(`${this.constructor.name}.${this.connectedCallback.name} 调用`);//从服务器获取内容，//这可能是 Blazor 组件标记尝试 {const response = await fetch("https://worldtimeapi.org/api/ip");const 数据 = 等待 response.json();const content = new Date(data.utc_datetime).toString();this.shadowRoot.innerHTML = `<span>${content}</span>`;}抓住(e){控制台错误(e)；const info = document.createTextNode(e.message);this.shadowRoot.appendChild(info);}}});<p>当前时间:<date-info/></p>现在，不是获取 https://worldtimeapi.org/api/ip，我想获取并呈现 Blazor/Server 组件的分离标记，例如:
@* 这是一个 Blazor 组件 *@<p>@(DateTime.Now)</p>此外，我希望此标记保持功能性和动态性，即客户端 DOM 事件和此 Blazor 组件的服务器端更新在包装 Web 组件的整个生命周期中进一步双向传播.
当然可以将其设为 Blazor @page 并将其加载到 iframe 中，但我更希望将其呈现为外部页面的一部分DOM.
到目前为止，我遇到了这个:
显然，这不是 2018 年 Blazor 的设计目标之一:https://github.com/dotnet/aspnetcore/issues/16033.>
后来 Steve Sanderson 创建了一个(非官方的)库来单独测试 Blazor 组件，理论上可以用来获得独立的 Blazor 组件标记:https://stackoverflow.com/a/60457390/1768303.
到目前为止，这是解决这个问题的最佳方法吗?
MS 已解决此限制，但该解决方案需要 .Net 6.
https://github.com/aspnet/AspLabs/tree/main/src/BlazorCustomElements
这是由史蒂夫·桑德森本人完成的.
Can we render a Blazor component as an independent DOM fragment, or somehow else consume it as a standard Web Component within a vanilla HTML/JS page?
This might be a naive question from the Blazor architectural standpoints. I am not a Blazor expert by far, but I think it can be a useful technique for incremental "brownfield" modernization of legacy web applications. I'm surprised this doesn't appear to be officially supported.
To illustrate, consider this simple web component example, which renders a custom element <date-info>:
// define a custom web component
customElements.define("date-info", class DateInfo extends HTMLElement {
constructor() {
super();
// create an "open" (vs "closed") shadow DOM,
// i.e., accessible to the outside JavaScript
this.attachShadow({ mode: "open" });
}
async connectedCallback() {
console.log(`${this.constructor.name}.${this.connectedCallback.name} called`);
// get the content from the server,
// this could be a Blazor component markup
try {
const response = await fetch("https://worldtimeapi.org/api/ip");
const data = await response.json();
const content = new Date(data.utc_datetime).toString();
this.shadowRoot.innerHTML = `<span>${content}</span>`;
}
catch(e) {
console.error(e);
const info = document.createTextNode(e.message);
this.shadowRoot.appendChild(info);
}
}
});
<!-- use the web component -->
<p>Current time: <date-info/></p>
Now, instead of fetching https://worldtimeapi.org/api/ip, I'd like to fetch and render a detached markup for a Blazor/Server component, e.g.:
@* this is a Blazor component *@
<p>@(DateTime.Now)</p>
Moreover, I'd expect this markup to remain functional and dynamic, i.e., the client-side DOM events and the server-side updates for this Blazor component to further propagate both ways, through the life cycle of the wrapping web component.
It's surely possible to make it a Blazor @page and load it into an iframe, but I'm rather looking to render it as a part of the outer page's DOM.
So far, I've come across this:
Apparently, that wasn't one of Blazor design goals back in 2018: https://github.com/dotnet/aspnetcore/issues/16033.
Later Steve Sanderson created an (unofficial) library to test Blazor components in isolation, which in theory can be used to get a standalone Blazor component markup: https://stackoverflow.com/a/60457390/1768303.
Is it the best approach to tackle this problem, so far?
MS has addressed this limitation, but the solution requires .Net 6.
https://github.com/aspnet/AspLabs/tree/main/src/BlazorCustomElements
This was done by the man himself, Steve Sanderson.
这篇关于我们可以在常规的非 Blazor HTML 页面中将 Blazor 组件用作 Web 组件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
