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 | 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: 'css-scoping', component: 'custom-element', argTypes:
{ title: { control: 'text', defaultValue: 'simple payload' }
, tag: { control: 'text', defaultValue: 'my-component' }
, slot: { control: 'text', defaultValue: `<slot>Hello World</slot>` }
, style: { control: 'text', defaultValue: `color:green; border:dashed pink;` }
, payload: { control: 'text', defaultValue: `Hi` }
}
};
function Template( { title, tag , style, slot, payload } )
{
return `
<fieldset>
<legend>${ title }</legend>
<custom-element tag="${ tag }" hidden>
<template>
<style>
${ style }
</style>
<u>${ slot }</u>
</template>
</custom-element>
${ payload }
</fieldset>
`;
}
const GREEN = `<b style="color:green">green</b>`
const RED = `<i style="color:red">red</i>`
export const StyleDoesNotLeak = Template.bind( {} );
StyleDoesNotLeak.args =
{ title: `The default color should stay on label, message in ${GREEN}`
, tag: 'dce-1'
, payload: `<dce-1></dce-1>`
};
export const StyleIn2Instances = Template.bind( {} );
StyleIn2Instances.args =
{ title: `The default color should apply ${GREEN} in all instances`
, tag: 'dce-2'
, payload: `<dce-2 id="dce21"></dce-2><dce-2 id="dce22"></dce-2>`
};
export const OverrideInPayload = Template.bind( {} );
OverrideInPayload.args =
{ title: `${GREEN} in instance style can be overridden in payload as ${RED}`
, tag: 'dce-3'
, payload: ` <dce-3 id="dce32">
<template>
<style> color:red; </style>
<u>red</u>
</template>
</dce-3>
<dce-3 id="dce31">green</dce-3> `
};
|