shadow content
';\n }\n}\n\ncustomElements.define('my-element', MyElement);\n\nit('my test', async () => {\n const el = await fixture(`\nshadow content
\n});\n```\n\n### Manual diffing\n\nYou can use the chai plugin to manually diff chunks of dom. The dom is diffed semantically: whitespace, newlines, etc. are normalized.\n\n```javascript\nclass MyElement extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n connectedCallback() {\n this.shadowRoot.innerHTML = 'shadow content
';\n }\n}\n\ncustomElements.define('my-element', MyElement);\n\nit('my test', async () => {\n const el = await fixture(`\nshadow content
');\n});\n```\n\n### Snapshot testing\n\n`semantic-dom-diff` supports managing snapshots of your components. Snapshot testing is supported in `@web/test-runner` with mocha, or karma with `karma-snapshot` and `karma-mocha-snapshot`.\n\nWhen using Web Test Runner, snapshot tests are async and the assertion must be awaited.\n\n#### Setting up a snapshot\n\nSnapshots are created by setting up your component in a specific state, and then calling `.to.equalSnapshot()`. You can use `.dom`, `.lightDom` or `.shadowDom` to set up the dom of your element:\n\n```js\nimport { fixture } from '@open-wc/testing';\n\ndescribe('my-message', () => {\n it('renders message foo correctly', async () => {\n const element = await fixture(`\n