Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import '../src/custom-element.js';
export default
{ title: 'SRC attribute', component: 'custom-element', argTypes:
{ title: { control: 'text', defaultValue: 'Template from same page DOM' }
, src: { control: 'text', defaultValue: '#template1' }
, tag: { control: 'text', defaultValue: 'my-component' }
, slot: { control: 'text', defaultValue: `` }
, payload: { control: 'text', defaultValue: `payload ignored by template` }
}
};
function Template( { title, tag , src, slot, payload, ceAttr, tagAttr } )
{
return `
<fieldset>
<legend>${ title }</legend>
<style>svg{max-height: 3rem}</style>
<template id="template1">
🏗️ construction
</template>
<custom-element
src="${src}"
tag="${ tag }"
${ceAttr || ''}
>${ slot }</custom-element>
${ tag ? `<${ tag } ${tagAttr ||''}>${ payload }</${ tag }>` :'' }
</fieldset>
`;
}
export const TemplateInPage = Template.bind( {} );
export const NoTag = Template.bind( {} );
NoTag.args =
{ title: 'No tag would instantiate DCE inline, the template in page DOM'
, src: '#template1'
, tag: ''
};
export const Svg = Template.bind( {} );
Svg.args =
{ title: 'external SVG file'
, src: '/src/demo/confused.svg'
, tag: ''
, slot: `loading from SVG`
, payload: ``
};
export const NoSvg = Template.bind( {} );
NoSvg.args =
{ title: 'external SVG file'
, src: '404-url'
, tag: ''
, slot: `<i>fallback for missing image</i>`
, payload: ``
};
export const Xsl = Template.bind( {} );
Xsl.args =
{ title: 'external XSLT file'
, src: 'tree.xsl'
, tag: ''
, ceAttr : ` data-smile="👼" attr-1="a1" attr-2="a2" `
, slot: `loading from XSL`
, payload: ``
};
export const HtmlTemplate = Template.bind( {} );
HtmlTemplate.args =
{ title: 'external HTML template'
, src: '/src/demo/html-template.html'
, tag: ''
, ceAttr : ` data-smile="👼" attr-1="a1" attr-2="a2" `
, slot: `<i>loading from HTML file ...</i>`
, payload: ``
};
export const HtmlById = Template.bind( {} );
HtmlById.args =
{ title: 'HTML by ID within external file'
, src: '/src/demo/html-template.html#wave'
, tag: ''
, ceAttr : ` `
, slot: `<i>loading from HTML file ...</i>`
, payload: ``
};
export const SvgById = Template.bind( {} );
SvgById.args =
{ title: 'SVG by ID within external file'
, src: '/src/demo/html-template.html#dwc-logo'
, tag: ''
, ceAttr : ` `
, slot: `<i>loading from HTML file ...</i>`
, payload: ``
};
export const XsltById = Template.bind( {} );
XsltById.args =
{ title: 'XSLT by ID within external file'
, src: '/src/demo/html-template.xhtml#embedded-xsl'
, tag: ''
, ceAttr : ` data-smile="👼" attr-1="a1" attr-2="a2" `
, slot: `<i>loading from HTML file ...</i>`
, payload: ``
};
export const EmbeddedDce = Template.bind( {} );
EmbeddedDce.args =
{ title: 'XSLT by ID within external file'
, src: '/src/demo/embed-1.html'
, tag: ''
, ceAttr : ` `
, slot: `<i>loading from HTML file ...</i>`
, payload: ``
};
|