tailor
tailor copied to clipboard
Custom Tags wraps html
I wanted to use custom tags in order to set style="direction:rtl;" (or style="direction:ltr") on content that that fetched from fragment. so my html will look something like this
<!doctype html>
<html>
<head>
<script type="fragment" id="fragment-common" primary></script>
</head>
<body>
<meta-direction>
<p>
<fragment primary id="fragment-1" src="http://localhost:8081"></fragment>
</p>
</meta-direction>
</body>
</html>
If I replace meta-direction tag it just refer to the opening position. I can set my Html like this:
<body>
<meta-direction>
<p>
<fragment primary id="fragment-1" src="http://localhost:8081"></fragment>
</p>
</div>
</body>
but then I don't have matching tags in my markup.
@UriZeliger If you have passed the corresponding tags in the handleTags option, you would get the matching closingTag for the same.
const tailor = new Tailor({
handleTags: ['meta-direction'],
handleTag: (req, tag) => {
if (tag.name === 'meta-direction') {
return '<div>'
}
if (tag.closingTag === 'meta-direction') {
// closing
return '</div>'
}
}
})
Hope this helps.