| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
（评论）
(comments)
原始链接: https://news.ycombinator.com/item?id=44053603
Shopify 推出了Storefront Web Components，这是一个库，使开发者能够轻松地将Shopify商店功能嵌入到任何网站中。这些组件充当模板语言，动态生成GraphQL查询并将数据渲染为文本节点，*无需* shadow DOM，赋予开发者完全的CSS控制权。这与许多施加设计限制的Web组件库形成对比。 一个关键用例是在第三方网站上嵌入Shopify产品，这可能会将Shopify转变为一个广泛的分配和发现网络。Shopify团队通过强调Web组件的灵活性来解决关于不断增长的商店开发选项（Hydrogen、Remix、原生模板等）数量的担忧。对于只需要简单集成的场景，它们是理想的选择，在这种场景下，像Hydrogen这样的完整框架可能显得过于复杂。项目内部的认可源于为提供更灵活的商店选项的愿望，团队使用广泛的端到端测试来确保质量。Shopify的设计系统Polaris现在也使用Web组件构建。
原文
We essentially use web components as a templating language to dynamically generate a GraphQL query to Shopify. Then render the data as text nodes inside the web components. This is powerful because the components don't include shadow roots. So you can come with your own HTML and CSS.
Most web component libraries are opinionated about design, and give you many CSS custom properties or CSS parts to customize. We tried really hard to invert that, and instead give you the design control. Most of our web components just produce a text node, with no shadow root!
There's a few exceptions, like the cart for example, where it's easier to just have an out of the box component that does it all for you ``. Though...you can actually build the entire cart component with the lower level primitives!
reply