开发: 管理样式

默认情况下，Web Widget 应用工作在 shadow DOM 中。

作用域

shadow DOM 的好处是确保应用的 CSS 只影响自己，这是减少样式冲突问题的最佳技术。例如如下 Web Widget 应用设置了全局的 <h3> 标签的样式，但它只会在应用内部生效：

export default () => ({
  async mount({ container }) {
    container.innerHTML = `
      <style>h3 { color: red }</style>
      <h3>hello wrold</h3>
    `;
  }
});

主题

在 shadow DOM 中，有三种方式可以从外部影响内部的样式，你可以只用其中之一，也可以同时使用三者：

• :host
  • :host()
  • :host-context()
• ::part
• CSS Custom Properties

例如使用 theme 属性来切换主题：

<web-widget theme="my-theme" src="app.widget.js"></web-widget>

// app.widget.js
export default () => ({
  async mount({ container }) {
    container.innerHTML = `
      <style>
        :host([theme=my-theme]) h3 {
          color: #FFF;
          background: #000;
        }
      </style>
      <h3>hello world</h3>
    `;
  },

  async unmount({ container }) {
    container.innerHTML = '';
  }
});

禁用 shadow DOM

<web-widget src="app.widget.js" rendertarget="light"></web-widget>