slot text in outside layer

[jholt1]

What is the issue

For web components the slot doesn't sit inside the slot layer but sits outside in the component folder.

From the image you can see that the text is inside the ui-button layer at the bottom rather than nested inside the button layer.

Sketch Version

49.3

What it looks like in the browser

What it look like in sketch

asketch.json

{"_class":"page","do_objectID":"77ffa496-53d4-4cba-b118-0e019871d983","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"Stories","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"symbolMaster","do_objectID":"4add3e67-8639-418b-9b12-93d79833cb0e","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"📱 ui-button/Standard","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"18430058-6c4d-46ed-8caf-ab509247f218","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"div","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"e30646af-2d0b-4cfd-9feb-2ca069b5ddb2","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"ui-button","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"682bb5b9-2cd2-4438-9cdd-68d220b96c2c","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"hello world","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":16,"fontFamily":"Times New Roman","fontWeight":400,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":13,"width":57.1875,"x":8,"y":49.90625},"text":"hello world","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":65.90625,"width":304,"x":0,"y":0},"hasClickThrough":false,"windingRule":1},{"_class":"group","do_objectID":"b01d81c4-3eb5-491e-96ca-6413b2cf1536","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"(h2)","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"f0febe70-2546-40f6-9075-39d30fe9ef84","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"Hello ui-button!","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":24,"fontFamily":"Times New Roman","fontWeight":700,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":26,"width":164.671875,"x":0,"y":0},"text":"Hello ui-button!","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":27,"width":304,"x":0,"y":0},"hasClickThrough":false,"windingRule":1},{"_class":"group","do_objectID":"945d3b79-e7be-4ed0-8653-56d66b685942","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"(button)","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"shapeGroup","do_objectID":"6eeb59fa-3d4e-43a9-9d88-1b3838f17b2a","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"/button[1]","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"rectangle","do_objectID":"043f0990-9998-4930-802c-78da76ff96f1","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"rectangle","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":73.203125,"x":0,"y":0},"path":{"_class":"path","isClosed":true,"pointRadiusBehaviour":1,"points":[{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0, 0}","curveMode":1,"curveTo":"{0, 0}","hasCurveFrom":false,"hasCurveTo":false,"point":"{0, 0}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{1, 0}","curveMode":1,"curveTo":"{1, 0}","hasCurveFrom":false,"hasCurveTo":false,"point":"{1, 0}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{1, 1}","curveMode":1,"curveTo":"{1, 1}","hasCurveFrom":false,"hasCurveTo":false,"point":"{1, 1}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0, 1}","curveMode":1,"curveTo":"{0, 1}","hasCurveFrom":false,"hasCurveTo":false,"point":"{0, 1}"}]},"hasConvertedToNewRoundCorners":true,"fixedRadius":0,"edited":false,"booleanOperation":-1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[{"_class":"fill","isEnabled":true,"color":{"_class":"color","red":1,"green":1,"blue":1,"alpha":1},"fillType":0,"noiseIndex":0,"noiseIntensity":0,"patternFillType":1,"patternTileScale":1}],"borders":[{"_class":"border","isEnabled":true,"color":{"_class":"color","red":0.8470588235294118,"green":0.8470588235294118,"blue":0.8470588235294118,"alpha":1},"fillType":0,"position":1,"thickness":1}],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":73.203125,"x":0,"y":0},"hasClickThrough":false,"windingRule":1},{"_class":"group","do_objectID":"5568a873-36fa-462b-9d19-3369f26fc039","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"(slot)","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":0,"width":0,"x":-8,"y":-67.8125},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":73.203125,"x":0,"y":47.90625},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":65.90625,"width":304,"x":8,"y":19.90625},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"width":312,"height":85.8125,"x":0,"y":0},"style":{"_class":"style","endDecorationType":0,"miterLimit":10,"startDecorationType":0},"horizontalRulerData":{"_class":"rulerData","base":0,"guides":[]},"verticalRulerData":{"_class":"rulerData","base":0,"guides":[]},"backgroundColor":{"_class":"color","alpha":1,"blue":1,"green":1,"red":1},"hasClickThrough":true,"includeInCloudUpload":true,"hasBackgroundColor":false,"includeBackgroundColorInExport":true,"resizesContent":false,"includeBackgroundColorInInstance":false,"symbolID":"ui-button/Standard:narrow","changeIdentifier":0},{"_class":"symbolMaster","do_objectID":"1ab9585e-f19a-4d3e-a5bc-120e70a162d6","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"📱 ui-button/Change prop value","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"07cda070-df70-4094-96b8-f7150b3754e7","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"div","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"fc35ce5f-0bce-4bd1-bfee-6251324907e6","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"ui-button","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"39e958da-25e6-4724-aca4-82278fa30c8b","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"hello world","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":16,"fontFamily":"Times New Roman","fontWeight":400,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":13,"width":57.1875,"x":8,"y":49.90625},"text":"hello world","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":65.90625,"width":304,"x":0,"y":0},"hasClickThrough":false,"windingRule":1},{"_class":"group","do_objectID":"da401dd9-fac8-4ffd-8e7c-52c211071b3d","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"(h2)","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"8d6bb6cf-e37b-423c-86a6-680bb6d8d559","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"Hello foo!","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":24,"fontFamily":"Times New Roman","fontWeight":700,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":26,"width":100.640625,"x":0,"y":0},"text":"Hello foo!","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":27,"width":304,"x":0,"y":0},"hasClickThrough":false,"windingRule":1},{"_class":"group","do_objectID":"b9bc717a-e31d-4086-a198-229cf702c18c","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"(button)","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"shapeGroup","do_objectID":"16c6bc80-721d-498d-9283-d5490be5043d","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"/button[1]","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"rectangle","do_objectID":"76ba8227-4c2c-4656-ac2d-8eead5d3077c","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"rectangle","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":73.203125,"x":0,"y":0},"path":{"_class":"path","isClosed":true,"pointRadiusBehaviour":1,"points":[{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0, 0}","curveMode":1,"curveTo":"{0, 0}","hasCurveFrom":false,"hasCurveTo":false,"point":"{0, 0}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{1, 0}","curveMode":1,"curveTo":"{1, 0}","hasCurveFrom":false,"hasCurveTo":false,"point":"{1, 0}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{1, 1}","curveMode":1,"curveTo":"{1, 1}","hasCurveFrom":false,"hasCurveTo":false,"point":"{1, 1}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0, 1}","curveMode":1,"curveTo":"{0, 1}","hasCurveFrom":false,"hasCurveTo":false,"point":"{0, 1}"}]},"hasConvertedToNewRoundCorners":true,"fixedRadius":0,"edited":false,"booleanOperation":-1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[{"_class":"fill","isEnabled":true,"color":{"_class":"color","red":1,"green":1,"blue":1,"alpha":1},"fillType":0,"noiseIndex":0,"noiseIntensity":0,"patternFillType":1,"patternTileScale":1}],"borders":[{"_class":"border","isEnabled":true,"color":{"_class":"color","red":0.8470588235294118,"green":0.8470588235294118,"blue":0.8470588235294118,"alpha":1},"fillType":0,"position":1,"thickness":1}],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":73.203125,"x":0,"y":0},"hasClickThrough":false,"windingRule":1},{"_class":"group","do_objectID":"7d136710-9257-4351-b939-011b1a6130fa","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"(slot)","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":0,"width":0,"x":-8,"y":-67.8125},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":73.203125,"x":0,"y":47.90625},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":65.90625,"width":304,"x":8,"y":19.90625},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"width":312,"height":85.8125,"x":0,"y":185.8125},"style":{"_class":"style","endDecorationType":0,"miterLimit":10,"startDecorationType":0},"horizontalRulerData":{"_class":"rulerData","base":0,"guides":[]},"verticalRulerData":{"_class":"rulerData","base":0,"guides":[]},"backgroundColor":{"_class":"color","alpha":1,"blue":1,"green":1,"red":1},"hasClickThrough":true,"includeInCloudUpload":true,"hasBackgroundColor":false,"includeBackgroundColorInExport":true,"resizesContent":false,"includeBackgroundColorInInstance":false,"symbolID":"ui-button/Change prop value:narrow","changeIdentifier":0},{"_class":"symbolMaster","do_objectID":"11d81772-aa07-46de-9ef2-dafcf2316716","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"🖥  ui-button/Standard","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"6b8c8daf-6206-4bef-ae50-49e757253f61","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"div","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"f1205536-5cb3-4a9b-9b7c-d3f663c89232","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"ui-button","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"e5f1c24e-066b-4846-9e8d-74ecbebddc8a","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"hello world","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":16,"fontFamily":"Times New Roman","fontWeight":400,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":13,"width":57.1875,"x":8,"y":49.90625},"text":"hello world","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":65.90625,"width":1904,"x":0,"y":0},"hasClickThrough":false,"windingRule":1},{"_class":"group","do_objectID":"ae4ea656-961d-456b-961a-326f0ce8a1fb","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"(h2)","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"e9865e6e-59a4-43bf-9e6b-c81dd553512f","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"Hello ui-button!","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":24,"fontFamily":"Times New Roman","fontWeight":700,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":26,"width":164.671875,"x":0,"y":0},"text":"Hello ui-button!","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":27,"width":1904,"x":0,"y":0},"hasClickThrough":false,"windingRule":1},{"_class":"group","do_objectID":"37970c22-7656-4722-99a4-4bf2d4457fe3","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"(button)","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"shapeGroup","do_objectID":"b551cba4-616a-4a99-b510-48fc756305a6","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"/button[1]","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"rectangle","do_objectID":"d950e0d1-dbf8-459d-99c4-68d817f911c8","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"rectangle","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":73.203125,"x":0,"y":0},"path":{"_class":"path","isClosed":true,"pointRadiusBehaviour":1,"points":[{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0, 0}","curveMode":1,"curveTo":"{0, 0}","hasCurveFrom":false,"hasCurveTo":false,"point":"{0, 0}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{1, 0}","curveMode":1,"curveTo":"{1, 0}","hasCurveFrom":false,"hasCurveTo":false,"point":"{1, 0}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{1, 1}","curveMode":1,"curveTo":"{1, 1}","hasCurveFrom":false,"hasCurveTo":false,"point":"{1, 1}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0, 1}","curveMode":1,"curveTo":"{0, 1}","hasCurveFrom":false,"hasCurveTo":false,"point":"{0, 1}"}]},"hasConvertedToNewRoundCorners":true,"fixedRadius":0,"edited":false,"booleanOperation":-1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[{"_class":"fill","isEnabled":true,"color":{"_class":"color","red":1,"green":1,"blue":1,"alpha":1},"fillType":0,"noiseIndex":0,"noiseIntensity":0,"patternFillType":1,"patternTileScale":1}],"borders":[{"_class":"border","isEnabled":true,"color":{"_class":"color","red":0.8470588235294118,"green":0.8470588235294118,"blue":0.8470588235294118,"alpha":1},"fillType":0,"position":1,"thickness":1}],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":73.203125,"x":0,"y":0},"hasClickThrough":false,"windingRule":1},{"_class":"group","do_objectID":"23ca80f6-4521-4860-9cdd-417cb84fb642","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"(slot)","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":0,"width":0,"x":-8,"y":-67.8125},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":73.203125,"x":0,"y":47.90625},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":65.90625,"width":1904,"x":8,"y":19.90625},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"width":1912,"height":85.8125,"x":412,"y":0},"style":{"_class":"style","endDecorationType":0,"miterLimit":10,"startDecorationType":0},"horizontalRulerData":{"_class":"rulerData","base":0,"guides":[]},"verticalRulerData":{"_class":"rulerData","base":0,"guides":[]},"backgroundColor":{"_class":"color","alpha":1,"blue":1,"green":1,"red":1},"hasClickThrough":true,"includeInCloudUpload":true,"hasBackgroundColor":false,"includeBackgroundColorInExport":true,"resizesContent":false,"includeBackgroundColorInInstance":false,"symbolID":"ui-button/Standard:standard","changeIdentifier":0},{"_class":"symbolMaster","do_objectID":"93b93e87-f12a-4c2d-bcc4-5406e131c90b","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"🖥  ui-button/Change prop value","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"a2a323a3-cdc6-4653-9ae1-c49a466faee7","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"div","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"group","do_objectID":"5b39cc6d-0969-4b8c-965f-d49115d34f81","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"ui-button","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"1d68e7fc-7394-43dd-a952-df3520f47f6f","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"hello world","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":16,"fontFamily":"Times New Roman","fontWeight":400,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":13,"width":57.1875,"x":8,"y":49.90625},"text":"hello world","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":65.90625,"width":1904,"x":0,"y":0},"hasClickThrough":false,"windingRule":1},{"_class":"group","do_objectID":"41c7d617-32ef-4f53-9a2a-b170fa7a739d","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"(h2)","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"text","do_objectID":"2f6bf072-6aca-41a2-ab7e-d2e04668d85e","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"Hello foo!","nameIsFixed":false,"resizingConstraint":47,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"clippingMaskMode":0,"hasClippingMask":false,"style":{"color":"rgb(0, 0, 0)","fontSize":24,"fontFamily":"Times New Roman","fontWeight":700,"textDecoration":"none","textAlign":"start","textTransform":"none"},"frame":{"_class":"rect","constrainProportions":false,"height":26,"width":100.640625,"x":0,"y":0},"text":"Hello foo!","automaticallyDrawOnUnderlyingPath":false,"dontSynchroniseWithSymbol":false,"lineSpacingBehaviour":2,"textBehaviour":0}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":27,"width":1904,"x":0,"y":0},"hasClickThrough":false,"windingRule":1},{"_class":"group","do_objectID":"b21207d8-faa6-4383-b27b-eea6a7615ab7","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"(button)","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"shapeGroup","do_objectID":"e8b662dd-3a37-4fdd-8761-f8869e01bbdb","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"/button[1]","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[{"_class":"rectangle","do_objectID":"8c29c71f-fc09-4243-8236-6f82410a571d","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"rectangle","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":73.203125,"x":0,"y":0},"path":{"_class":"path","isClosed":true,"pointRadiusBehaviour":1,"points":[{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0, 0}","curveMode":1,"curveTo":"{0, 0}","hasCurveFrom":false,"hasCurveTo":false,"point":"{0, 0}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{1, 0}","curveMode":1,"curveTo":"{1, 0}","hasCurveFrom":false,"hasCurveTo":false,"point":"{1, 0}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{1, 1}","curveMode":1,"curveTo":"{1, 1}","hasCurveFrom":false,"hasCurveTo":false,"point":"{1, 1}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0, 1}","curveMode":1,"curveTo":"{0, 1}","hasCurveFrom":false,"hasCurveTo":false,"point":"{0, 1}"}]},"hasConvertedToNewRoundCorners":true,"fixedRadius":0,"edited":false,"booleanOperation":-1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[{"_class":"fill","isEnabled":true,"color":{"_class":"color","red":1,"green":1,"blue":1,"alpha":1},"fillType":0,"noiseIndex":0,"noiseIntensity":0,"patternFillType":1,"patternTileScale":1}],"borders":[{"_class":"border","isEnabled":true,"color":{"_class":"color","red":0.8470588235294118,"green":0.8470588235294118,"blue":0.8470588235294118,"alpha":1},"fillType":0,"position":1,"thickness":1}],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":73.203125,"x":0,"y":0},"hasClickThrough":false,"windingRule":1},{"_class":"group","do_objectID":"71d84ebe-24c8-4415-a540-560a9e8292c9","exportOptions":{"_class":"exportOptions","exportFormats":[],"includedLayerIds":[],"layerOptions":0,"shouldTrim":false},"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"(slot)","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"layers":[],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":0,"width":0,"x":-8,"y":-67.8125},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":18,"width":73.203125,"x":0,"y":47.90625},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","fills":[],"borders":[],"shadows":[],"innerShadows":[],"endDecorationType":0,"miterLimit":10,"startDecorationType":0,"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":"1"}},"frame":{"_class":"rect","constrainProportions":false,"height":65.90625,"width":1904,"x":8,"y":19.90625},"hasClickThrough":false,"windingRule":1}],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"width":1912,"height":85.8125,"x":412,"y":185.8125},"style":{"_class":"style","endDecorationType":0,"miterLimit":10,"startDecorationType":0},"horizontalRulerData":{"_class":"rulerData","base":0,"guides":[]},"verticalRulerData":{"_class":"rulerData","base":0,"guides":[]},"backgroundColor":{"_class":"color","alpha":1,"blue":1,"green":1,"red":1},"hasClickThrough":true,"includeInCloudUpload":true,"hasBackgroundColor":false,"includeBackgroundColorInExport":true,"resizesContent":false,"includeBackgroundColorInInstance":false,"symbolID":"ui-button/Change prop value:standard","changeIdentifier":0}],"clippingMaskMode":0,"hasClippingMask":false,"frame":{"_class":"rect","constrainProportions":false,"height":5000,"width":1920,"x":0,"y":0},"style":{"_class":"style","endDecorationType":0,"miterLimit":10,"startDecorationType":0},"horizontalRulerData":{"_class":"rulerData","base":0,"guides":[]},"verticalRulerData":{"_class":"rulerData","base":0,"guides":[]},"hasClickThrough":true,"includeInCloudUpload":true}

[kdzwinel]

Thanks for reporting! Brainly doesn't use web components, so we won't be able to prioritize it anytime soon, but feel free to open a PR, we will be happy to help getting it merged.

[jholt1]

@kdzwinel I have raised a PR #146