diff --git a/docs/pages/docs.md b/docs/pages/docs.md index d753258..9277eb5 100644 --- a/docs/pages/docs.md +++ b/docs/pages/docs.md @@ -50,6 +50,12 @@ export default Home; ``` > _**Note**: **WCC** will wrap or not wrap your _entry point's HTML_ in a custom element tag if you do or do not, respectively, include a `customElements.define` in your entry point. **WCC** will use the tag name you define as the custom element tag name in the generated HTML._ +> +> You can opt-out of this by passing `false` as the second parameter to `renderToString`. +> +> ```js +> const { html } = await renderToString(new URL('...'), false); +> ``` ### renderFromHTML diff --git a/src/wcc.js b/src/wcc.js index 234982e..b27278f 100644 --- a/src/wcc.js +++ b/src/wcc.js @@ -160,9 +160,9 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti } } -async function renderToString(elementURL) { +async function renderToString(elementURL, wrappingEntryTag = true) { const definitions = []; - const elementTagName = await getTagName(elementURL); + const elementTagName = wrappingEntryTag && await getTagName(elementURL); const isEntry = !!elementTagName; const elementInstance = await initializeCustomElement(elementURL, undefined, undefined, definitions, isEntry); @@ -171,7 +171,7 @@ async function renderToString(elementURL) { : elementInstance.innerHTML; const elementTree = getParse(elementHtml)(elementHtml); const finalTree = await renderComponentRoots(elementTree, definitions); - const html = elementTagName ? ` + const html = wrappingEntryTag && elementTagName ? ` <${elementTagName}> ${serialize(finalTree)} diff --git a/test/cases/no-wrapping-entry-tag/no-wrapping-entry-tag.spec.js b/test/cases/no-wrapping-entry-tag/no-wrapping-entry-tag.spec.js new file mode 100644 index 0000000..460d961 --- /dev/null +++ b/test/cases/no-wrapping-entry-tag/no-wrapping-entry-tag.spec.js @@ -0,0 +1,37 @@ +/* + * Use Case + * Run wcc against bundled custom elements with no wrapping enabled. + * + * User Result + * Should return the expected HTML with no top level wrapping tag. + * + * User Workspace + * src/ + * pages/ + * no-wrap.js + */ + +import chai from 'chai'; +import { JSDOM } from 'jsdom'; +import { renderToString } from '../../../src/wcc.js'; + +const expect = chai.expect; + +describe('Run WCC For ', function() { + const LABEL = 'Bundled Components w/ No Wrapping Entry TAag'; + let dom; + + before(async function() { + const { html } = await renderToString(new URL('./src/no-wrap.js', import.meta.url), false); + + dom = new JSDOM(html); + }); + + describe(LABEL, function() { + describe('no top level wrapping by ', function() { + it('should have a